html - 一个 div 保持在另一个 div 之下

Question

我有一个 div，我想在其他主 div 的底部对齐

更新: 这是实际代码:

<div style="width: 800px; height: 400px;"> 
few more controls here
  <div style="height: 230px; ">

                    <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2"
                        regiontype="HtmlEditor" required="false" />
                </div>

                <div style="height: 50px; width: 800px; border: 2px solid #99CC00; font-size: 13px;
                    color: #ffbb33; overflow: hidden; padding: 5px 20px 5px 20px;">
                    <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1"
                        regiontype="TextBox" required="false" />
                </div>
</div>

尽管给了innerdiv1固定高度，但innerdiv 2仍然按照inner div 1的内容不断向上移动

因此，如果innerdiv1 中没有内容，则innerdiv 2 将完全向上移动。有没有一种方法可以修复 innerdiv2，使其在不使用绝对定位的情况下保持低于 innerdiv1 250px。

解决方案也应该适用于所有 IE。

Answer 1

这应该可以解决您的第一个问题。

<div id="maindiv">
    <div id="innerdiv1" style="height:200px;">
        few dynamic controls here
    </div>
    <div id="innerdiv2" style="height:50px">
        This div should be just above footer.
    </div>
</div>

编辑:

您可能想查看这些关于 html 和 css 的基本教程。

http://www.w3schools.com/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

这应该适用于您编辑的问题:

看起来您的 div 标签上方的“这里还有几个控件”正在将内容向下推，它应该放在您的 div 标签内。如果您不希望这样，您可以将这些控件包装在一个 div 中并为其设置一个高度。

<div style="width: 800px; height: 400px;">
    <div style="height: 230px;">
        few more controls here
        <!-- this content should be inside the div if you want the content to stay fixed.-->
        <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2" regiontype="HtmlEditor" required="false" />

    </div>

    <div style="height: 50px; width: 800px; border: 2px solid #99CC00; font-size: 13px;color: #ffbb33; overflow: hidden; padding: 5px 20px 5px 20px;">
        <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1"                         regiontype="TextBox" required="false" />
    </div>
</div>

这可能是一种更简洁的方式。

<style>
.outer {
width: 800px;
height: 400px;
background-color:#eee;
}
.top {
height: 230px;
background-color:#fee;
}
.bottom {
height: 50px;
/*height actually 64px when including border and padding*/
width: 800px;
/*width actually 844px when including border and padding*/
border: 2px solid #99CC00;
/* padding adds 2 px to all sides for a total of 4px */
font-size: 13px;color:
#ffbb33;
overflow: hidden;
padding: 5px 20px 5px 20px;
/* padding adds 5px to top and bottom for a total of 10px
 * padding adds 20px to left and right sides for a total of 40px */
background-color:#fee;

}
</style>
<div class="outer">
<div class="top">
    few more controls here
    <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2" regiontype="HtmlEditor" required="false" />
    </div>
<div class="bottom">
    <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1" regiontype="TextBox" required="false" />
    </div>
</div>