CSS Float相对于以前的元素

Question

是否有一种方法允许元素根据前面元素的尺寸浮动，而不是内联到元素的调用位置。

以此为例。第一列漂浮在左边，而两个漂浮在右边。但是，基于此代码，第二列将相对于第二列浮动。有没有办法，假设我无法改变第二列可以相对于第一列的第一个版本浮动的代码的顺序。

<div class="container">
    <div class="column1">Column One</div>
    <div class="column1">Column One</div>
    <div class="column2">Column Two</div>
</div>

.container {
    width:400px;
}

.column1 {
    float:left;
    width: 260px;
    height:400px;
    background:red;
}

.column2 {
    float:right;
    width: 120px;
    height:400px;
    background:green;
}

http://jsfiddle.net/nya28329/5/

Answer 1

浮动属性有点棘手。

如您所见，在我添加的图像中，second-column1元素占据1st-column1元素旁边的空格（即粉红色矩形框）。但是，由于它的尺寸不能很大（即260px <容器宽度（400px）），它出现在第一列元素下面。

这就是为什么column2元素出现在下面的原因。因为第二列1元素占用了该特定空间。 （它类似于相对定位的元素。即，它占据空间，但它出现/定位在另一个地方）

因此，如果不改变html

，你无法做到的