Question

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

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

这很好，但在桌面体验中，使用相同的标记，它们必须显示如上面的小提琴，即右边的蓝色和绿色容器，具有固定的宽度，并且红色容器到左边，红色容器必须跨越页面的剩余宽度，如下所示：

enter image description here

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

enter image description here

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

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 calc函数

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

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

4 个答案: