如何使一个div包装两个浮动divs里面？ [英] how to make a div to wrap two float divs inside?
问题描述
我不知道这是一个常见的问题，但我找不到解决方案在web到目前为止。
我想有两个div包装在另一个div，但是这两个div在内部必须对齐相同的级别（例如：左边一个占用20％的宽度的wrappedDiv，右边一个采取另一个80％）。为了实现这个目的，我使用了下面的示例CSS。但是，现在wrap DIV没有包装那些div全部。包装Div具有比包含在内部的两个div小的高度。我如何确保wrap Div具有最大的高度作为包含的div？谢谢！
I don't know if it's a common problem, but I can't find the solution in web so far. I would like to have two divs wrapped inside another div, however these two divs inside have to be align the same level (for example: left one takes 20%width of the wrappedDiv, right one take another 80%). To achieve this purpose, I used the following example CSS. However, now the wrap DIV didn't wrap those divs all. The wrap Div has a small height than those two divs contained inside. How could I make sure that the wrap Div has the largest height as the contained divs? Thanks!!!
<!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>
推荐答案
这是一个常见的问题，块。修复它的最好方法是在第二个 div 后使用 clear：两个。
It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.
<div style="display: block; clear: both;"></div>
它应该强制容器的高度正确。
It should force the container to be the correct height.
这篇关于如何使一个div包装两个浮动divs里面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
