0

我有一个两列布局，由固定宽度的浮动 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/（这个小提琴插入了一些内容并添加了颜色以使发生的事情更加清晰）。这是一个屏幕截图：

column2 重叠超宽

在不改变基本 HTML 结构或三个元素的宽度的情况下，是否可以（在没有 Javascript 的帮助下）强制 column1 中的超宽元素出现在 column2 下方？这是我想要达到的效果：

column2 向下推超宽

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

4

1 回答 1

1

看着它，没有在内容元素上设置高度或使用 javascript 来计算它们的高度或在超宽元素上设置定位，您正在寻找的东西无法实现。

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

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

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

于 2012-10-17T17:29:49.393 回答