Question

我正在尝试创建一个包含三列的页面。外柱很简单。但是，中间列在顶部有一个列宽的div，需要垂直扩展以适应内容，然后是另外两个需要并排放置的div。我的问题是随着顶部div的扩大，两个较低的div会向下移动。

中间栏的核心代码是：

// the top column-wide div
echo '<div id="centre">';
// echo some variable length text
echo '</div>';

// the bottom left div
echo '<div id="centreleft">';
// echo some variable length text
echo '</div>';

// the bottom right div
echo '<div id="centreright">';
// echo some variable length text
echo '</div>';

使用固定高度的顶部div，以下css可以工作：

#centre {
    position: absolute;
    left: 230px;
    top: 30px;
    width: 690px;
    overflow: visible;
}
#centreleft {
    position: absolute;
    left: 230px;
    top: 355px;
    width: 335px;
    overflow: visible;
}
#centreright {
    position: absolute;
    left: 595px;
    top: 355px;
    width: 320px;
    overflow: visible;
}

我需要更改以使顶部div具有可变高度？我已经尝试将较低div的位置更改为relative，但随后所有内容都会写入屏幕的左上角。

Answer 1

不要使用绝对定位。浮动下部div或使用display:inline-block;等。绝对位置意味着“将它们保持原样”，将它们从文档流中移除并将它们固定到位。

更多信息：https://developer.mozilla.org/en/CSS/position#Absolute_positioning

干杯

Answer 2

你为什么要使用position：absolute？

请参阅：http://jsfiddle.net/vFEux/

并使用边距将容器彼此移动得更多。

Answer 3

我同意。浮动这些婴儿而不是绝对定位并清除第二个div以确保它低于第一个。

堆叠扩展DIV

3 个答案: