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