floated element being pushed down by previous element

问题

http://jsfiddle.net/4gw8wank/

I have 3 container as part of a responsive page. In the mobile view they must display in the order- blue, red, green, stacked on top of each other like so..

<div class="blue"></div>
<div class="red"></div>
<div class="green"></div>

which is fine, but in a desktop experience, using the same markup, they must display as shown in the fiddle above, i.e. with the blue and green containers to the right, with a fixed width, and the red container to the left, whereby the red container must span the remaining width of the page, like so:

I am seeing a problem where at smaller resolutions, the green container will be pushed down, see below

Is there any way I can get around this?

回答1:

You can use the following styles:

.test1 {
    padding-right:200px;
}
.right {
    float:right;
    width:200px;
    margin-right:-200px;
    clear:right;
}
.left {
    float:left;
    width:100%;
}

Example

Example with media query stacking

回答2:

So far I know, change your html structure like this, if you want to show the divs in different order for desktop as you mentioned in your question,

show different html on desktop, and the one as I linked above for the smaller devices(using mediaQuery).

Demo(and I have seen a similar question on SO before I just cant find it)

<!-- for mobile -->

<div class="test1 hidden-lg hidden-md hidden-sm">
    <div>
    <div class="right blue">
        <p>some text some text some text some text some text some text some text some text </p>
    </div>  
    <div class="right green">
        <p>some text some text some text some text some text some text some text some text </p>
    </div>
    </div>
    <div class="left red">
        <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
    </div>

</div>




<!-- for desktop -->

<div class="test1  hidden-xs">
    <div class=" blue">
        <p>some text some text some text some text some text some text some text some text </p>
    </div>  

    <div class=" red">
        <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
    </div>
    <div class=" green">
        <p>some text some text some text some text some text some text some text some text </p>
    </div>
</div>

回答3:

That is a normal behaviour to achieve what you want to do, you can either use:

1- the css calc function

<!DOCTYPE html>
<html>
  <head>
    <style>

      .right{float:right; clear:right; width:200px}
      .left {
        display: block;
        overflow: hidden;
        max-width: calc(100% - 200px);
        float: left;
      }




      .blue{
        background:blue;
      }

      .green{
        background:green; 	
      }

      .red{background:red;}

    </style>
  </head>
  <body>
    <div class="test1">
      <div class="right blue">
        <p>some text some text some text some text some text some text some text some text </p>
      </div>	

      <div class="left red">
        <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
      </div>
      <div class="right green">
        <p>some text some text some text some text some text some text some text some text </p>
      </div>
    </div>
  </body>
</html>

回答4:

I came up with this solution using percentage widths, and a media query for smaller screen sizes. I hope it helps:

http://jsfiddle.net/ben220/rjef89uw/

<div class="blue">
  <p>some text some text some text some text some text some text some text some text </p>
</div>  

<div class="red">
  <p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>

<div class="green">
  <p>some text some text some text some text some text some text some     text some text </p>
</div>


* {
box-sizing: border-box;
}

div {
    height: 120px;
    border: 1px solid transparent;
}


.blue {
    background:blue;
    width: 30%;
    float: right;
}

.green {
    background:green;
    width: 30%;
    float: right;
}

.red {
    background: red;
    float: left;
    width: 70%;
}

@media screen and ( max-width: 580px ) and ( min-width: 1px ) {
    .blue, .green, .red {
    float: none;
    width: 100%;
    }
}

来源：https://stackoverflow.com/questions/28189709/floated-element-being-pushed-down-by-previous-element

标签

html

css

responsive-design

css-float