浮动元素被前一个元素向下推

Question

我有 3 个容器作为响应页面的一部分。在移动视图中，它们必须按顺序显示 - 蓝色、红色、绿色，像这样堆叠在一起..

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

很好，但在桌面体验中，使用相同的标记，它们必须如上图 fiddle 所示显示，即右侧的蓝色和绿色容器，宽度固定，和左侧的红色容器，其中红色容器必须跨越页面的剩余宽度，如下所示：

我看到一个问题，在较小的分辨率下，绿色容器会被向下推，见下文

有什么办法可以解决这个问题吗？

Answer 1

到目前为止我知道，如果你想像你在问题中提到的那样以不同的顺序为桌面显示 div，请将你的 html 结构更改为 this，

在桌面上显示不同的 html，以及我在上面为较小的设备（使用 mediaQuery）链接的那个。

Demo（之前在SO上看到过类似的问题，就是找不到）

<!-- 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>

Answer 2

您可以使用以下样式：

.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

Answer 3

这是实现您想要执行的操作的正常行为，您可以使用：

1- css 计算函数

<!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>

Answer 4

我使用百分比宽度和针对较小屏幕尺寸的媒体查询想出了这个解决方案。希望对您有所帮助：

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%;
    }
}

浮动元素被前一个元素向下推

floated element being pushed down by previous element

html

css

css-float

responsive-design