css - 使用 CSS 强制 float column-1 中的超宽元素出现在 float column-2 下方

Question

我有一个两列布局，由固定宽度的 float div 组成。第一列内是一个超宽元素。所以 html 布局看起来像这样:

<div id="container">
    <div id="column1">
        ...short content...
        <div id="extra-wide">
            ...wide content...
        </div>
    </div>
    <div id="column2">
        ...long content...
    </div>
</div>

如注释所示，第一列包含少量内容，第二列包含大量内容。 CSS 看起来像这样:

#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }

因此超宽元素实际上比其父元素 column1 更宽。而且我事先不知道任何元素的高度——它们都是可变的。

这里的问题是 column2 与 column1 中的超宽元素重叠。这是一个 jsfiddle 来帮助形象化:http://jsfiddle.net/e3KNg/ (这个 fiddle 插入了一些内容并添加了颜色以使正在发生的事情更加清晰)。这是一个屏幕截图:

在不改 rebase 本 HTML 结构或三个元素的宽度的情况下，是否可以(不借助 Javascript)强制 column1 中的超宽元素出现在 column2 下方？这是我想要达到的效果:

我知道这可以通过重新排列 html 元素或使用 Javascript 来完成，但我正在寻找符合上述限制条件的解决方案。我尝试在各个地方使用清除div，删除或调整 float ，并尝试一些溢出设置，但无法达到我想要的效果。

Answer 1

看一下，内容元素不设置高度，不使用javascript计算高度，不设置超宽元素的定位，你要找的是无法实现的。

这是一个 fiddle ，它使用超宽元素的绝对定位和顶部值，以及使用一些巧妙的 css 使列具有相同的高度。

http://jsfiddle.net/yKRu4/1/

正如我所说，这是可行的，但老实说，我觉得您所设置的限制无法实现您正在寻找的东西。