Wil*_*Lou 72 html css layout css-float
我不知道这是否是一个常见的问题,但到目前为止我无法在网络上找到解决方案.我想在另一个div中包含两个div,但是这里面的两个div必须对齐相同的级别(例如:left one占用wrappedDiv的20%宽度,右边一个占80%).为了达到这个目的,我使用了以下示例CSS.但是,现在换行DIV并没有包装所有div.包裹Div的高度小于内部包含的两个div.我怎么能确保包装Div具有最大的高度作为包含的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>
Mik*_*l S 118
除了clear: bothhack 之外,你可以跳过额外的元素并使用overflow: hidden包装div:
<div style="overflow: hidden;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
Mee*_*p3D 72
当块内有两个浮点数时,这是一个常见问题.修复它的最好方法是clear:both在第二个之后使用div.
<div style="display: block; clear: both;"></div>
它应该强制容器的高度正确.
这应该这样做:
<div id="wrap">
<div id="nav"></div>
<div id="content"></div>
<div style="clear:both"></div>
</div>
overflow:hidden (如@Mikael S所述)并不适用于所有情况,但它应该适用于大多数情况.
另一种选择是使用:after技巧:
<div class="wrapper">
<div class="col"></div>
<div class="col"></div>
</div>
.wrapper {
min-height: 1px; /* Required for IE7 */
}
.wrapper:after {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
content: ".";
font-size: 0;
}
.col {
display: inline;
float: left;
}
而对于IE6:
.wrapper { height: 1px; }