css - 使 CSS 浮动列在顶部对齐

Question

http://jsfiddle.net/y88mq/1/

我有一个包含三个容器的简单布局：一、二、三。我试图让三个在顶部与一个对齐。现在一和二向左浮动，三向右浮动。我尝试了清除组合，但似乎没有用。我想让它只与 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;

我已经对您的 Fiddle 进行了更改：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 中，则可以有效地将包装器 div 和第三列并排浮动并在顶部对齐。包装器 div 将堆叠第一列和第二列。

这种方法的额外优势是，如果有更多可用空间，您可以选择在一行上对齐第一列和第二列。

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

Answer 5

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