排列多個div如何最好地處理佈局

Question

基本上，我想要做的是在master div中放置一些div來模擬表格。

唯一的區別是有時根據「行」不同，「列」需要是不同的大小。所以我想弄清楚如何最好地定位div。我應該浮動的div，abs位置等...

我只是想到另一種方式。我應該讓每行一個div，然後每個「列」跨度？

Answer 1

我會說，爲了得到安排，你會想表div的：

讓你的主人DIV有CSS樣式是這樣的：

的位置是：絕對的;
top：0px;
left：0px;

你的左上角單元格將有一個風格是這樣的：

的位置是：相對的;
top：10px;
left：10px;
width：50px;
height：100px;

這將使第一個單元格位於左上角10px，它的尺寸爲50px寬和100px高。

接下來，您右上角細胞將有一個這樣的風格：

的位置是：相對的;
top：10px;
left：70px;
width：50px;
height：100px;

這將位於頂部右上角的單元格10px和主div的左側70px（這將從左上角單元格的右邊緣10px）。

您可能邏輯出後續單元格的位置。確保您的top和left值考慮了主div的頂部和左邊的總距離。

Answer 2

你可以推進你爲每一列放置div的想法。這會使排列成爲不規則的表格，行高有規律，列寬不規則。

Answer 3

如果你只是想輸出少量的數據，爲什麼不使用表？表格數據是正確的。

Answer 4

如果數據是表格數據（其中包括表單IMO），那麼使用一個表格，這就是表格標籤的用處，足夠出乎意料。

如果您想創建列，那麼您只需將它們浮動到左側，並添加填充或邊距以分隔列。您可以將多個類附加到每個div，以針對特定情況，例如增加一列的寬度。

Answer 5

根據「列」的內容使用span作爲「列」標記可能無效。 div是塊級元素，span是內聯元素。內聯元素不能包含塊級元素。所以在語義上，我會建議不要使用span。

你想要的基本上是一個網格佈局系統。有a CSS3 working draft這個，但自然它還沒有實施。你可能想看看網格佈局系統，如blueprint,yui-grids或960gs。