Question

我有一个div包含三个div作为我网站的一部分代码是这样的：

<div id="container">
<div ></div>
<div id="div1"></div>
<div id="div1"></div></div>

在css中：

#container {
margin: 0 auto;
width: 950px;
opacity: .5;
filter: alpha(opacity = 50);
background: #fff;}

#div1 {
width: 100%;
height: 30px;
background: black;
float: left;}

#div2 {
margin:50px 0 50px 0;
width: 950px;
float: left;}

#div3 {
border: 1px solid black;
width: 437px;
height: 532px;
margin: 18px;
float: left;}

当我删除＃{1}}形式的#container时那么使用firefox它的高度不会为零但是当我把它添加回来时，它会正常工作，但我无法将这个男孩放在浏览器窗口中心。

我该如何解决这个问题？

Answer 1

使用明确的div。这将允许您的容器适应浮动元素的高度。你的CSS也有一些错误。

“＃”。不是你如何申报身份证。

此外，HTML中的ID需要与CSS 100％中的ID匹配，区分大小写。在您的HTML中，您有id="contianer"，但在您的css中#container

.clear {
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0!important
}

#container {
    margin: 0 auto;
    width: 950px;
    opacity: .5;
    filter: alpha(opacity = 50);
    background: #fff;
}
#div1 {
    width: 100%;
    height: 30px;
    background: black;
    float: left;
}

#div2 {
    margin:50px 0 50px 0;
    width: 950px;
    float: left;
}

#div3 {
    border: 1px solid black;
    width: 437px;
    height: 532px;
    margin: 18px;
    float: left;
}

<div id="container">
    <div ></div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div class="clear"></div>
</div>

Answer 2

有一个简单的解释。

浮动元素意味着您将其从正常的元素流中取出，而非浮动元素将不会为其腾出空间。

因此，当一个容器只有float个子元素时，容器不会取其子元素的高度或宽度。

为了使这项工作直观，意味着让容器占据其子容器的宽度和高度，您可以float容器，或使用several methods for clearing floats之一。

我首选的解决方案是在容器上使用overflow: hidden，如果浮动它在您的方案中不起作用。 overflow: hidden适用于大多数简单案例。

Answer 3

而不是使用float：left ...使用display：inline;

<style>
  #container{margin:0 auto;width:950px;opacity: .5;filter: alpha(opacity = 50);background: #fff;text-align:center;}
  #container div{display:inline;}
</style>
<div id="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    <div class="div3">Div 3</div>
</div>

容器应该为我计算高度吗？

3 个答案: