浮動的div和不必要的空間

我有幾個浮動的div，這是圖形排列正是如此（其在代碼層次用數字表示）：浮動的div和不必要的空間

包含在包裝

(1)top left div - (2)div - (3)top right div 
(6)bottom left div - (4)div - (5)bottom right div

所有div目前浮動左邊。我遇到的問題是左下方的框比它應該在的位置更低。我知道爲什麼;最後一個盒子在右下方左側浮動，所以它會從佈局中移出。我的問題是如何將該div備份到它所屬的位置。

基本的div被輸出爲這樣：

 
••• 
•• 
•

你也應該知道，左上方格比其他兩個頂級的div高，而左下方格是比其他兩個底行短div的。

來源

2010-09-22 Adam

好吧，格式化全部搞砸了。基本上，它是2行3格。左下角過低。 – Adam 2010-09-22 23:54:12

您可以使用'

...

'來保留空格並以固定寬度的字體顯示文本。 – Alec 2010-09-22 23:56:31

或只使用代碼格式 – alex 2010-09-22 23:57:01

根據源代碼順序，唯一可以做到這一點的方法是在第六個div的頂部指定一個負邊距 - 如果所有高度都被測量並且它應該完全適合，可能只是指定負邊距的高度。

來源

2010-09-23 00:21:20 pnomolos

我假定你所看到的，而像這樣：

 
| 1 | 2 | 3 | 
| | 4 | 5 | 
| 6 |

你的彩車第二行是浮動對第一個div，你說的是更長的右側。有幾種解決方案：

在該行的第一個div上添加一個clear: left。
將每行包裝在一個與clear: left風格相同的div中。
在div上設置一個固定的高度，以防止有更長的一個突出和混亂的佈局。

來源

2010-09-23 00:21:39

如果你正在尋找的是這些漂浮divs完美填補所有空間，這不會發生沒有一些wonkiness。當一格高於其他格的那一刻，剩下的物品將不再是全部觸摸。正如預期的那樣發生：一旦一系列浮標碰到文檔的右側，下一個浮動項目出現在的左側上一行的浮標之下。強迫第三行上浮，所以它似乎是第二行的一部分是可能的，但不會很好地處理各種屏幕尺寸...

如果你真的需要3列，爲什麼不'您是否創建了3列，並在每列中浮動了頂部和底部元素？然後一切都會按照你的期望疊加。這樣的事情：

| 1 | 3 | 5 | 
| 2 | 4 | 6 |

來源

2010-09-23 00:26:54 ErikE

浮動的div和不必要的空間

回答

相關問題