如何创建一个div来包装两个浮动的div？
如何创建一个div来包装两个浮动的div？
提问于 2009-12-04 09:02:22
我不知道这是不是一个常见的问题，但是到目前为止我还没有在web上找到解决方案。我想有两个div包装在另一个div，但是这两个div里面必须对齐相同的水平(例如:左占20%的宽度的wrappedDiv，右占80%)。为了实现这个目的，我使用了下面的示例CSS。然而，现在的wrap DIV并没有包装所有的DIV。wrap Div的高度比里面包含的两个Div小。我怎样才能确保wrap Div的高度最大呢？谢谢！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>liquid test</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
height:100%;
}
#nav
{
float: left;
width: 25%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
margin-left: 1%;
width: 65%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#wrap
{
background-color:#DDD;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<h1>wrap1 </h1>
<div id="nav"></div>
<div id="content"><a href="index.htm">< Back to article</a></div>
</div>
</body>
</html>回答 10
Stack Overflow用户
回答已采纳
发布于 2009-12-04 09:05:59
当一个块中有两个浮点数时，这是一个常见的问题。修复它的最好方法是在第二个div之后使用clear:both。
<div style="display: block; clear: both;"></div>它应该强制容器达到正确的高度。
Stack Overflow用户
发布于 2009-12-04 09:18:31
除了clear: both hack之外，您还可以跳过额外的元素，在包装div上使用overflow: hidden
<div style="overflow: hidden;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>Stack Overflow用户
发布于 2009-12-04 09:07:27
这应该可以做到：
<div id="wrap">
<div id="nav"></div>
<div id="content"></div>
<div style="clear:both"></div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1844207
复制相关文章
相似问题