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