Html 如何制作一个 div 将两个浮动 div 包裹在里面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1844207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make a div to wrap two float divs inside?
提问by WilliamLou
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!!!
我不知道这是否是一个常见问题，但到目前为止我无法在网络中找到解决方案。我想将两个 div 包裹在另一个 div 中，但是里面的这两个 div 必须对齐在同一级别（例如：左边一个占据了wrappedDiv 的20% 宽度，右边一个占据了另一个80%）。为了达到这个目的，我使用了以下示例 CSS。但是，现在 wrap 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>
采纳答案by Meep3D
It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:bothafter the second div.
当一个块中有两个浮点数时，这是一个常见问题。修复它的最佳方法是clear:both在第二个之后使用div。
<div style="display: block; clear: both;"></div>
It should force the container to be the correct height.
它应该强制容器具有正确的高度。
回答by Mikael S
Aside from the clear: bothhack, you can skip the extra element and use overflow: hiddenon the wrapping div:
除了clear: bothhack之外，您还可以跳过额外的元素并overflow: hidden在包装上使用div：
<div style="overflow: hidden;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
回答by jerjer
This should do it:
这应该这样做：
<div id="wrap">
<div id="nav"></div>
<div id="content"></div>
<div style="clear:both"></div>
</div>
回答by Thomas J Bradley
overflow:hidden(as mentioned by @Mikael S) doesn't work in every situation, but it should work in most situations.
overflow:hidden（正如@Mikael S 所提到的）并非在所有情况下都有效，但它应该在大多数情况下都有效。
Another option is to use the :aftertrick:
另一种选择是使用: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;
}
And for IE6:
对于 IE6：
.wrapper { height: 1px; }
回答by Alex Lane
Float everything.
漂浮一切。
If you have a floated divinside a non-floated div, everything gets all screwy. That's why most CSS frameworks like Blueprint and 960.gs all use floated containers and divs.
如果你有一个浮动div在一个非浮动的里面div，一切都会变得很棘手。这就是为什么大多数 CSS 框架（如 Blueprint 和 960.gs）都使用浮动容器和divs.
To answer your particular question,
要回答您的特定问题，
<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>
should work just fine, as long as you float:left;all of your <div>s.
应该工作得很好，只要你float:left;所有的<div>s。
回答by Satish Gandham
Use this CSS hack, it saved me lot of trouble and time.
使用这个 CSS hack，它为我节省了很多麻烦和时间。
I use it in every project.
我在每个项目中都使用它。
回答by Mayeenul Islam
Here's another, I found helpful. It works even for Responsive CSS design too.
这是另一个，我发现有帮助。它甚至适用于响应式 CSS 设计。
#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 */
}
WARNING:But this theory won't work for holder contains inner elements with absolute positions. And it will create problem for fixed-width layout. But for responsive design, it's just excellent. :)
警告：但是这个理论不适用于持有人包含具有绝对位置的内部元素。它会给固定宽度的布局带来问题。但是对于响应式设计来说，它非常出色。:)
ADDITION TO Meep3D's ANSWER
除了 Meep3D 的答案
With CSS3, in a dynamic portion, you can add clear float to the last element by:
使用 CSS3，在动态部分，您可以通过以下方式向最后一个元素添加清除浮动：
#wrap [class*='my-div-class']:last-of-type {
display: block;
clear: both;
}
Where your divs are:
你的 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>
Reference:
参考：
回答by Fernando Carrascosa
Here i show you a snippet where your problem is solved (i know, it's been too long since you posted it, but i think this is cleaner than de "clear" fix)
在这里，我向您展示一个解决您问题的片段（我知道，您发布它已经太久了，但我认为这比“清除”修复更清晰）
#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>回答by Sebachenko
HTML
HTML
<div id="wrapper">
<div id="nav"></div>
<div id="content"></div>
<div class="clearFloat"></div>
</div>
CSS
CSS
.clearFloat {
font-size: 0px;
line-height: 0px;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
}
回答by Mori
Instead of using overflow:hidden, which is a kind of hack, why not simply setting a fixed height, e.g. height:500px, to the parent division?
而不是使用overflow:hidden，这是一种黑客，为什么不简单地设置一个固定的高度，例如height:500px，到父部门？
