我必须设置容器的高度吗？
[英]Do I have to set the height of the container?
问题描述
I have this code: 
我有以下代码：
#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;
} }
and this HTML CODE: 和这个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>
I see that the container has no height.... do I Must set it? 我看到容器没有高度。...我必须设置它吗？ I would like to explain the height depending on the height of the inner DIVs, How could i do it? 我想根据内部DIV的高度来说明高度，我该怎么办？
3 个解决方案
解决方案1
4 已采纳 2012-05-03 16:21:56
You do not have to set the height, just add: 您不必设置高度，只需添加：
<div style="clear: both;"></div>
directly below any divs that you float. 直接在您浮动的所有div下方。
In your case, you could do this:
就您而言，您可以执行以下操作：
Just add this to your CSS file. 只需将其添加到您的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>
And update your HTML file to match 并更新您的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>
解决方案2
1 2012-05-03 16:23:26
That happens because you used float:left . 发生这种情况是因为您使用了float:left 。 One solution is to add a clear:both div as follow: 一种解决方案是添加一个clear:both如下：
CSS: CSS：
.clear {
clear: both;
}
HTML: HTML：
<div id="container">
<div id="sidebar">LEFT</div>
<div id="wrapper">RIGHT</div>
<div class="clear"></div>
</div>
解决方案3
0 2012-05-03 16:37:22
Give the container the additional CSS 给容器附加CSS
overflow: hidden;
This will break the float with no extra markup 这将打破浮动，没有额外的标记
(Will not work with box-shadow inside) （将无法在其中使用盒子阴影）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.