4 Column Div布局

我正在尝试创建4列<div>布局。4 Column Div布局

为什么行容器不在相应的行周围绘制边框？此外，这是一个很好的方法，因为在我的CSS写得很好流体和浏览器窗口的动态调整大小？

任何建议或帮助将不胜感激。

Here是我目前的尝试。

来源

2011-07-21 Gabe

当使用float时，需要将溢出设置为auto。 http://jsfiddle.net/gJJHs/

来源

2011-07-21 22:10:07 RandomWebGuy

设置“高度”不是必需的。除此之外，这是“清除”浮筒的首选方法。 – You

你的权利，谢谢。 – RandomWebGuy

-2

向您的.row添加“float：none; clear：both”，您将看到相应的行。但是对于你正在寻找的流体行为和设计，你会想要应用一些JavaScript（如jQuery等高：http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/），以保持跨浏览器的一致性，而不需要大量的CSS黑客攻击。

来源

2011-07-21 22:08:57

我很想解释为什么这么快就得到了downvoted。根据我对用户对CSS和浮动的理解（Gabe的实力在C＃中）的理解，对于他来说，举起重负的JavaScript方法似乎比“设置div的高度”等非解决方案更合适。 –

它是左边的浮标。这需要div“流出”，并且在空白空间周围绘制边框本质上是

来源

2011-07-21 22:09:37

这个问题似乎是你浮动你的列，当你浮动的东西，他们有效地占用零空间。

我认为解决方案是取消你的“最后”类中的浮动，并为每一行添加一个“虚拟列”。

这个CSS似乎工作：

.col 
{ 
    float: left; 
    width: 25%; 
} 

.last{ 
    clear: left; 
} 

.row{ 
    border: 1px solid green; 
}

修订的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>

来源

2011-07-21 22:11:42 devuxer

还有一种选择，除了其他的答案，是增加overflow: hidden;到您的.row。

您看到的行为的原因是float将div放在正常流程之外。 div然后基本上不占用文档中的空间。

如果您考虑浮动图像的表面目的以便围绕文本进行换行，这是有意义的。将下一个p标签（例如）定位为浮动图像不在那里，即与图像重叠。然后，浏览器将图像周围的'p'标签内的文本包装起来。（如果浮动图像没有“从流中移除”，那么p标签自然会出现在图像—的下方，但不会产生所需的效果。）

下面是我如何编写代码。

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：

.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 */ 
}

来源

2011-07-21 22:22:11 antinome

当元件是浮动的，它的父不再包含它，因为所述浮子从所述流中除去。浮动元素不在自然流中，因此所有块元素都会呈现，就好像浮动元素不在那里一样，所以父容器不会完全展开以容纳浮动的子元素。

因此，border会看起来像它没有任何接壤:(看看下面的文章，以获得CSS的float属性是如何工作的一个更好的主意：

The Mystery Of The CSS Float Property

正如其他曾经说过，如果添加overflow: auto;你.row类，它会采取照顾的问题。这里的另一篇文章，解释为什么要使用溢出。

http://www.quirksmode.org/css/clearing.html

我希望这有助于。
Hristo

来源

2011-07-21 22:23:48 Hristo