我如何在CSS中安排这个？

Question

我不确定如何正确地说出这个问题，所以在我尝试解释时请耐心等待。

我正在处理一个两列但有三个div并使用Bootstrap框架的布局。第一个div被推到右边，第二个div被拉到左边。第三个div我希望它向右拉，并将flush设置为第一个div的底部。现在，第三个div的顶部位于第二个div的底部。

我希望以这种方式布局的原因是在桌面上查看时会有两列，但在移动设备上查看时，它会缩小到一列，第三个div将低于内容。第二个div。

<div class="container">
    <div class="div1">DIV1. This will be on the right</div>
    <div class="div2">DIV2. This will be on the left</div>
    <div class="div3">DIV3. This will be on the right</div>
</div>

完整的CSS：http://jsfiddle.net/m8z37q0y/1/

Answer 1

删除position: relative;属性或也将其添加到容器中。然后实际使用float: right;和div1上的div3并删除右/左属性：

    .container {
        width: 400px;
        height: 250px;
        background: #ccc;
    }
    .div1 {
        width: 100px;
        height: 100px;
        background: #eee;
        float: right;
    }
    .div2 {
        width: 300px;
        height: 200px;
        background: #aaa;
        float: left;
    }
    .div3 {
        width: 100px;
        height: 100px;
        background: #777;
        float: right;
    }

请参阅 DEMO

Answer 2

http://jsfiddle.net/m8z37q0y/7/

.container {
    width: 400px;
    height: 250px;
    background: #ccc;
}
.div1 {
    width: 100px;
    height: 100px;
    background:green ;
    left: 300px;
    float: right;

}
.div2 {
    width: 300px;
    height: 200px;
    background: blue;
    right: 100px;
    float: left;

}

.div3 {
    width: 100px;
    height: 100px;
    background: red;

    float: right;

}

Answer 3

查看 Demo jsFiddle

删除 position: relative 和 .div2{...} 类中的 .div3 {...} 属性。

将属性值 float: left 更改为 float: right 类中的 .div3{...} 以归档此内容。< / p>

.div2 {
    width: 300px;
    height: 200px;
    background: #aaa;
    right: 100px;
    float: left;
    position: relative;      /* Remove this */
}
.div3 {
    width: 100px;
    height: 100px;
    background: #777;
    left: 300px;
    float: left;             /* Set float Right */
    position: relative;      /* Remove this */
}

Answer 4

看一下这个演示：http://jsfiddle.net/abruzzi/m8z37q0y/8/
你应该删除下面的所有css属性： position: relative; left...
并设置正确的float属性，如下所示：

.div1 {
    width: 100px;
    height: 100px;
    background: #eee;
    float: right;
}
.div2 {
    width: 300px;
    height: 200px;
    background: #aaa;
    float: left;
}
.div3 {
    width: 100px;
    height: 100px;
    background: #777;
    float: right;
}

Answer 5

 <div class="container">

<div class="div1">DIV1. This will be on the right</div>
    <div class="div2">DIV2. This will be on the left</div>

    <div class="div3">DIV3. This will be on the right</div>
</div>


         .container {
width: 400px;
height: 250px;
background: #ccc;
     }
.div1 {
width: 100px;
height: 100px;
background: #eee;
left: 300px;
float:right;
}
.div2 {
width: 300px;
height: 200px;
background: #aaa;
right: 100px;
float:left;

 }
 .div3 {
width: 100px;
height: 100px;
background: #777;
left: 300px;
float:right;

}