Question

我有一个简单的布局，有三个容器：一个，两个，三个。我试图让三个在顶部与一个对齐。现在一个和两个向左浮动，三个向右浮动。我尝试过清算的组合，但它似乎没有用。我想让它与CSS一起工作。

<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>

.left {
    background: red;
    width: 66%;
    height: 200px;
    margin-bottom: 10px;
    float: left;
}

.right {
    background: green;
    width: 33%;
    float: right;
    height: 200px;
}

编辑：我想保持源订单相同

Answer 1

由于CSS及其邪恶浮动的性质，我建议你重新安排盒子的顺序。这样可以正常工作：

<div class="left">one</div>
<div class="right">three</div>
<div class="left">two</div>

请参阅：http://jsfiddle.net/y88mq/2/

Answer 2

如果你必须保持HTML的顺序相同，那么我能想到的就是使用：

position: absolute;

我对你的小提琴进行了更改：http://jsfiddle.net/hRdEf/

希望有所帮助。

Answer 3

只需将“右侧div”放在列出的div的顶部即可。

<div class="right">three</div>    
<div class="left">one</div>
<div class="left">two</div>

..//rest of code

http://jsfiddle.net/y88mq/7/

Answer 4

<div class="left">one</div>
<div class="left">two</div>
<div class="right">three</div>

.left {
   background: red;
   width: 32%;
   height: 200px;
   margin-right:  20px;
   float: left;
}

.right {
   background: green;
   width: 33%;
   float: right;
   height: 200px;
}

Answer 5

如果将第1列和第2列包装在div中，则可以有效地将包装div和第3列并排浮动并在顶部对齐。包装div将保留第一列和第二列。

这种方法的另一个优点是，如果有更多可用空间，您可以在一条线上选择对齐列一和二。

从语义上讲，您的列仍然处于相同的顺序。

使CSS浮动列对齐在顶部

5 个答案: