0

我正在尝试创建一个包含三列的页面。外列很简单。但是,中间列的顶部有一个列宽的 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 的位置更改为相对位置,但随后所有内容都写入屏幕的左上角。

4

3 回答 3

1

不要使用绝对定位。浮动较低的 div 或 usedisplay:inline-block;等。绝对位置意味着“将它们保持在原处”,它将它们从文档流中删除并且它们被锚定在适当的位置。

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

干杯

于 2012-04-18T19:39:18.603 回答
0

为什么还要使用 position:absolute 呢?

见:http: //jsfiddle.net/vFEux/

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

于 2012-04-18T19:44:13.940 回答
0

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

于 2012-04-18T20:14:11.273 回答