我有一个两列布局,由固定宽度的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/(此小提琴插入了一些内容,并添加了颜色以使发生的事情更加清晰)。这是屏幕截图:
在不更改基本HTML结构或三个元素的宽度的情况下,是否有可能(无需借助Javascript)强制将column1中的超宽元素显示在column2下方?这是我想要达到的效果:
我知道可以通过重新排列html元素或使用Javascript来完成,但是我正在寻找上述约束范围内的解决方案。我尝试在各个地方使用div清除,删除或调整浮点数以及尝试一些溢出设置,但无法达到我想要的效果。
最佳答案
看着它,如果没有在内容元素上设置高度,或者没有使用JavaScript来计算它们的高度,或者没有在超宽元素上设置位置,就无法实现您所寻找的目标。
这是一个小提琴,它使用超宽元素的绝对位置和最高值来工作,并且使用一些巧妙的CSS使列具有相同的高度。
http://jsfiddle.net/yKRu4/1/
就像我说的那样,但是老实说,如果您设置了限制,那么您无法找到想要的东西。