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

发布于 2024-11-29 17:05:51 字数 1482 浏览 2 评论 0原文

我正在制作的网页遇到一些问题...

我有一个 div，其中包含页面上的所有元素（或者更确切地说，页面页眉和页脚之间的所有元素，但这无关紧要）。 body div 的高度会根据它所容纳的内容而变化。包装器包含一个 id="content" 的 div，该 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。

希望我已经给了你一个合适的表述。对我的要求有任何疑问吗？

有什么想法吗？

原文

I have some troubble with a web page I'm making...

I have a div that contains all elements on the page (or rather all elements between the header and the footer of the page, but that's irrelevant). The height of the body div changes due to the content it's holding.
The wrapper holds one div with id="content" that is supposed to hold whatever content I want displayed on the page, one div I use as a button (id="collapse") and one div (id="calendar") that creates a field that will hold a list of events comming up.

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>

Now this is my problem: If I set #body height:auto; the float of the #collapse div and the width of the #content div acts wierd. #collapse div floats all the way to the edge of the #body div instead of stopping when it floats into the #calendar div. Same thing with the #content div. It stretches till the #body edge, not till the #calendar.

Hope I've given you a proper formulation. Any questions of what I'm asking for?

Any ideas?

分享到QQ

分享到微博