Html 4 列 Div 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6783374/
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
4 Column Div Layout
提问by Gabe
I am trying to create a 4 column <div>layout.
我正在尝试创建一个 4 列<div>布局。
Why are the row containers not drawing a border around the respective row? Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
为什么行容器不在各自的行周围绘制边框？另外，这是一个很好的方法吗，因为我的 css 是否写得很好以保持流畅并动态调整浏览器窗口的大小？
Any suggestions or help would be most appreciated.
任何建议或帮助将不胜感激。
Hereis my current attempt.
这是我目前的尝试。
回答by RandomWebGuy
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
使用浮动时，您需要将溢出设置为自动。http://jsfiddle.net/gJJHs/
回答by devuxer
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
问题似乎是您正在浮动您的列，而当您浮动东西时，它们实际上占用了零空间。
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
我认为解决方案是取消您“最后一个”课程中的浮动，并为每一行添加一个“虚拟列”。
This CSS seems to work:
这个 CSS 似乎有效：
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
修改后的 HTML（最后一列是虚拟的）：
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
回答by Hristo
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
当一个元素被浮动时，它的父元素不再包含它，因为浮动被从流中移除。浮动元素脱离了自然流，因此所有块元素将呈现为好像浮动元素甚至不存在一样，因此父容器不会完全扩展以容纳浮动子元素。
As such, the borderwill seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
因此，border看起来它不会与任何东西接壤 :( 查看以下文章以更好地了解 CSS Float 属性的工作原理：
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto;to your .rowclass, it'll take care of the problem. Here's another article that explains why to use overflow.
正如其他人所说，如果你添加overflow: auto;到你的.row班级，它会解决这个问题。这是另一篇文章，解释了为什么要使用溢出。
http://www.quirksmode.org/css/clearing.html
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
我希望这有帮助。
赫里斯托
回答by Joseph Marikle
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
这是左边的浮动。这使 div“不流动”，它基本上在空白空间周围绘制边界
回答by antinome
Yet another option, in addition to the other answers, is to add overflow: hidden;to your .row.
除了其他答案之外，另一种选择是添加overflow: hidden;到您的.row.
The reason for the behavior you saw is that floattakes the div outside of the normal flow. The div then essentially takes up no space in the document.
您看到的行为的原因是float将 div 置于正常流程之外。div 基本上不占用文档中的空间。
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next ptag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the ptag would naturally appear below the image—not giving the desired effect.)
如果您考虑浮动图像以在其周围环绕文本的表面目的，这是有道理的。下一个p标签（例如）的位置就好像浮动图像不存在一样，即与图像重叠。然后，浏览器将文本包裹在图像周围的“p”标签内。（如果浮动图像没有“从流中移除”，p标签自然会出现在图像下方——不会产生预期的效果。）
Here's how I'd write the code.
这是我编写代码的方式。
HTML:
HTML：
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
CSS：
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
回答by Eric Caron
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.
将“float:none;clear:both”添加到您的 .row 中，您将适当地看到行。但是对于您正在寻找的流畅行为和设计，您需要应用一些 javascript（例如 jQuery Equal Height：http: //www.jainaewen.com/files/javascript/jquery/equal-height-columns/）在没有大量 CSS hack 的情况下跨浏览器保持一致。
