我不知道这是一个常见的问题，但我找不到解决方案在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" "www.w3/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里面？
发布评论