-1

我有一个 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 仍然根据内部 div 1 的内容不断向上移动

因此，如果 innerdiv1 中没有内容，则 innerdiv 2 完全向上移动。有没有办法在不使用绝对定位的情况下修复 innerdiv2 以保持在 innerdiv1 以下 250 像素。

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

4

4 回答 4

3

这应该适用于您的第一个问题。

<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>
于 2013-01-11T16:47:22.903 回答
1 
<div id="maindiv">
    <div id="innerdiv1" style="height:200px;">

    </div>
    <div id="innerdiv2" style="height:50px;">
    This div should be just above footer.
    </div>
</div>

您的 HTML 不正确！

小提琴

于 2013-01-11T16:47:37.207 回答
1

使用 CSS

<style>
#innerdiv1 { height:200px;}
#innerdiv2 { height:50px;}
</style>

<div id=maindiv>
<div id=innerdiv1>
    few dynamic controls here
</div>
<div id=innerdiv2>
This div should be just above footer.
</div>
</div>

你也可以使用这个

<div id=maindiv>
<div style="height:200px;">
    few dynamic controls here
</div>
<div style="height:50px;">
This div should be just above footer.
</div>
</div>
于 2013-01-11T16:47:42.427 回答
0

尝试在样式属性中设置高度。

<div style="height:250px;">
     above
</div>
<div style="height: 150px;">
     below
<div/>

在此处查看示例和更多教程 http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height

于 2013-01-11T16:55:05.050 回答