【发布时间】：2011-10-27 13:54:48
【问题描述】：
我正在制作的网页有些问题...
我有一个 div 包含页面上的所有元素（或者更确切地说是页面页眉和页脚之间的所有元素，但这无关紧要）。 body div 的高度会随着它所持有的内容而变化。 包装器包含一个 id="content" 的 div，它应该包含我想在页面上显示的任何内容，一个 div 我用作按钮 (id="collapse") 和一个 div (id="calendar")创建一个包含即将发生的事件列表的字段。
CSS：
#body {
height:500px;
min-height:250px;
width:100%;
background:#fc0;
padding-bottom:100%;
margin-bottom:-100%;
}
#calendar {
float:right;
height:100%;
width:20%;
border-left:10px solid #678DC0;
background:#b0c4de;
padding-bottom:100%;
margin-bottom:-100%;
}
#collapse {
float:right;
margin-top:10px;
text-align:left;
padding-left:10px;
padding-top:20px;
padding-bottom:20px;
background:#678DC0;
border-top-left-radius:25px;
-moz-border-top-left-radius:25px; /* Firefox 3.6 and earlier */
border-bottom-left-radius:25px;
-moz-border-bottom-left-radius:25px;
}
#content {
height:auto;
width:100%;
background:#b0c4de;
text-align:center;
padding:50px;
}
HTML：
<div id="body">
<div id="calendar"></div>
<div id="collapse">>></div>
<div id="content"></div>
</div>
现在这是我的问题：如果我设置 #body height:auto; #collapse div 的浮点数和 #content div 的宽度表现得很奇怪。 #collapse div 一直浮动到#body div 的边缘，而不是在它浮动到#calendar div 时停止。 #content div 也是如此。它一直延伸到#body 边缘，而不是#calendar。
希望我给了你一个正确的表述。对我的要求有任何疑问吗？
有什么想法吗？
【问题讨论】：
-
当你使用float时，它会浮动下一个兄弟元素，除非你有一个Clear:both|left|right;作为 CSS 样式。因为你的“body” div 有 height:auto;，它会根据子 div 的大小而增长/缩小。