我必须设置容器的高度吗？

Question

我有以下代码：

#container {
    position:relative;
    width:760px;    

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

    border: 1px solid #cdcdcd;  
}

#sidebar {
    float:left;
    width: 200px;
    background:red;
}

#wrapper {
    float:left;
    width:460px;
background:blue;

}

和这个HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>          
        </div>  
    </body>
</html>

我看到容器没有高度。...我必须设置它吗？ 我想根据内部DIV的高度来说明高度，我该怎么办？

Answer 1

您不必设置高度，只需添加：

<div style="clear: both;"></div>

直接在您浮动的所有div下方。

就您而言，您可以执行以下操作：

只需将其添加到您的CSS文件即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example.com</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                        LEFT
            </div>

            <div id="wrapper">
                RIGHT
            </div>    
            <div class="clear"></div>      
        </div>  
    </body>
</html>

并更新您的HTML文件以使其匹配

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example.com</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="container"> <div id="sidebar"> LEFT </div> <div id="wrapper"> RIGHT </div> <div class="clear"></div> </div> </body> </html>

Answer 2

发生这种情况是因为您使用了float:left 。 一种解决方案是添加一个clear:both如下：

CSS：

.clear {
    clear: both;
}

HTML：

<div id="container">
    <div id="sidebar">LEFT</div>
    <div id="wrapper">RIGHT</div>
    <div class="clear"></div>
</div>

Answer 3

给容器附加CSS

overflow: hidden;

这将打破浮动，没有额外的标记
（将无法在其中使用盒子阴影）

我必须设置容器的高度吗？

问题描述

3 个解决方案

解决方案1
4 已采纳 2012-05-03 16:21:56

解决方案2
1 2012-05-03 16:23:26

解决方案3
0 2012-05-03 16:37:22

我必须设置容器的高度吗？

问题描述

3 个解决方案

解决方案1 4 已采纳 2012-05-03 16:21:56

解决方案2 1 2012-05-03 16:23:26

解决方案3 0 2012-05-03 16:37:22

解决方案1
4 已采纳 2012-05-03 16:21:56

解决方案2
1 2012-05-03 16:23:26

解决方案3
0 2012-05-03 16:37:22