html - 堆叠扩展 DIV

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 的位置更改为相对位置，但随后所有内容都写到了屏幕的左上角。

Answer 1

不要使用绝对定位。 float 较低的 div 或使用 display:inline-block; 等。绝对位置意味着“将它们保持在原处”，它将它们从文档流中移除并将它们固定在适当的位置。

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

干杯