html - 如何在不影响页面设计的情况下排列div

Question

如何定位一个 div 以便我的页面在加载某些内容时展开。在下图中，我使用的 div 扰乱了页面设计。

我正在使用以下 CSS:

#middlePanel {
    width:70%;
    float:left;
    background:#CCC;
}

#forum_act_container
{
    width:300px;
    position:relative;
    left:20px;
    top:20px;
}
#forum_act_header
{
    height:35px;
    border-radius:3px 3px 0px 0px;
    background: linear-gradient(white, #999); /* Standard syntax */
    text-align:center;
    line-height:33px;
}
#forum_act
{
     overflow:scroll;
     height:300px;
     padding:10px;
     border:#FFF 1px solid;
}

下面是他们的html结构:

<div id="middlePanel">
      <div id="forum_act_container">
        <div id="forum_act_header">Newest Forum Activites</div>
        <div id="forum_act"><?php echo $forum_activities; ?></div>
      </div>
</div>

我应该使用什么 css 代码，以便 middlePanel div 随内容动态扩展。

Answer 1

你需要在中间面板中有一个更清晰的 div，所以添加

<div id="middlePanel">
      <div id="forum_act_container">
        <div id="forum_act_header">Newest Forum Activites</div>
        <div id="forum_act"><?php echo $forum_activities; ?></div>
      </div>
<div style="clear: both;"></div>
</div>