CSS Float 相对于前一个元素答案

【问题标题】：CSS Float relative to previous elementsCSS Float 相对于前一个元素
【发布时间】：2015-09-26 15:28:08
【问题描述】：

有没有办法让一个元素根据它之前元素的尺寸浮动，而不是内联到元素被调用的地方。

以此为例。第一列向左浮动，而两列向右浮动。但是，基于此代码，第二列将相对于第二列浮动。有没有办法，假设我无法更改第二列可以相对于第一列的第一个化身向右浮动的代码顺序。

<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/

【问题讨论】：

想要的结果会是什么样子？
@j08691 像这样..jsfiddle.net/nya28329/8
在您的第二个小提琴（第 8 个）中，与第一个（第 5 个）相反，第二个 column1 实际上是“第二列”，第三列。这很令人困惑，很难弄清楚你想要什么。
@MrLister 第二个是向您展示我想要通过第一个实现的目标。

标签： css css-float multiple-columns

【解决方案1】：

float 属性有点棘手。

如您所见，在我添加的图像中，第二列元素占据了第一列元素旁边的空间（即粉红色矩形框）。但是，由于它的大小不能很大（即 260px

这就是为什么 column2 元素出现在下面的原因。因为该特定空间已被 2nd-Column1 元素占用。（它类似于一个相对定位的元素。即它占用空间但它出现/定位在另一个地方）

因此，如果不更改 html，就无法完成您想要实现的目标

【讨论】：