Question

我有一些关于我正在制作的网页的麻烦......

我有一个包含页面上所有元素的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。

希望我给你一个合适的配方。有关我要求的任何问题吗？

有什么想法吗？

Answer 1

正如Ryan评论的那样，您可以使用清晰的样式来正确定位浮动元素。我在这里设置了一个测试页面：http://jsbin.com/apinuj/2/edit#html,live，演示如何在html上使用明确修复，以便在设置为height: auto.

时正文对齐

父div的高度设置会干扰子div的浮动

1 个答案: