如何使一个div包裹两个浮动div里面？
我不知道这是一个常见的问题，但到目前为止我还是无法在网上find解决scheme。 我想有两个div包裹在另一个div内，但是这两个div里面必须alignment相同的级别（例如：left一个占用了20％的包裹宽度，另一个占80％）。 为了达到这个目的，我使用了下面的例子CSS。 但是，现在换行DIV并没有包装这些div。 包裹Div有比包含里面的两个div小的高度。 我怎么能确保包裹div有最大的高度作为包含divs？ 谢谢！！！
<!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> 当你在一个块内有两个浮点数时，这是一个常见的问题。 解决这个问题的最好方法是使用clear:both在第二个div 。
<div style="display: block; clear: both;"></div>
它应该强制容器是正确的高度。
除了clear: both破解，你可以跳过额外的元素，并使用overflow: hidden在包装div ：
<div style="overflow: hidden;"> <div style="float: left;"></div> <div style="float: left;"></div> </div>
这应该做到这一点：
<div id="wrap"> <div id="nav"></div> <div id="content"></div> <div style="clear:both"></div> </div>
overflow:hidden （正如@Mikael S所提到的）在任何情况下都不起作用，但它应该在大多数情况下工作。
另一个select是使用: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; }
浮动一切。
如果你在一个非浮动的div里面有一个浮动的div ，那么所有的东西都会变得棘手。 这就是为什么大多数像Blueprint和960.gs这样的CSS框架都使用浮动容器和divs 。
要回答你的问题，
<div class="container"> <!-- .container { float: left; width: 100%; } --> <div class="sidebar"> <!-- .sidebar { float: left; width: 20%; height: auto; } --> </div> <div class="content"> <!-- .sidebar { float: left; width: 20%; height: auto; } --> </div> </div>
应该工作得很好，只要你float:left; 所有的<div> s。
使用这个CSS黑客，它节省了我很多的麻烦和时间。
我在每个项目中都使用它。
这是另一个，我觉得很有帮助。 它甚至可以用于响应式CSSdevise。
#wrap { display: table; table-layout: fixed; /* it'll enable the div to be responsive */ width: 100%; /* as display table will shrink the div to content-wide */ }
警告：但是这个理论不适用于包含绝对位置的内部元素。 这将会造成固定宽度布局的问题。 但是对于响应式devise来说，这非常好。 🙂
除了Meep3D的答案
在CSS3中，在dynamic部分中，您可以通过以下方式将清除浮动添加到最后一个元素：
#wrap [class*='my-div-class']:last-of-type { display: block; clear: both; }
你的div在哪里：
<div id="wrap"> <?php for( $i = 0; $i < 3; $i++ ) { <div class="my-div-class-<?php echo $i ?>> <p>content</p> </div> <!-- .my-div-class-<?php echo $i ?> --> } </div>
参考：
-
:last-of-type– CSS-TRICKS
在这里，我向你展示你的问题解决的一个片段（我知道，它已经过了很长时间，因为你发布它，但我认为这是比清晰的修复更清洁）
#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; overflow: hidden }
<div id="wrap"> <h1>wrap1 </h1> <div id="nav"></div> <div id="content"><a href="index.htm">< Back to article</a></div> </div>
而不是使用overflow:hidden ，这是一种破解，为什么不简单地设置一个固定的高度，例如height:500px ，对于父分区呢？
<html> <head> <style> #main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;} #one { width: 20%; height: 100%; background-color: blue; display: inline-block; } #two { width: 80%; height: 100%; background-color: red; display: inline-block; } </style> </head> <body> <div id="main"> <span id="one">one</span><span id="two">two</span> </div> </body> </html>
秘密是inline-block 。 如果您使用边框或边距，则可能需要减小使用它们的div的宽度。
注：如果使用“DIV”而不是“SPAN”，则在IE6 / 7中无法正常工作。 （见http://www.quirksmode.org/css/display.html ）
HTML
<div id="wrapper"> <div id="nav"></div> <div id="content"></div> <div class="clearFloat"></div> </div>
CSS
.clearFloat { font-size: 0px; line-height: 0px; margin: 0px; padding: 0px; clear: both; height: 0px; }
