自動填充兩列

我想使用CSS爲我的列表創建兩個列布局。自動填充兩列

比方說，我有5個項目，演示將是：

<item 1> <item 4> 
<item 2> <item 5> 
<item 3>

我怎樣才能做到這一點與HTML和CSS？請記住，列表長度是可變的。

我將使用C＃生成HTML服務器端，這將提供更多的靈活性。

來源

2009-07-02 Adrian Godong

我不認爲這可以使用CSS來完成，聽起來更像是您需要的javascript/JSP解決方案 – James 2009-07-02 11:32:50

是的，愚蠢的是，我將生成HTML和CSS服務器端。我想知道HTML和CSS的樣子。 – 2009-07-02 11:35:25

越過越容易，越往下越難......有一些技巧，但大多數情況下，「報紙專欄」效果在CSS中被認爲很難。有一些擴展到CSS這樣做，雖然他們不是跨瀏覽器... – Stobor 2009-07-02 11:35:26

我終於下定了決心，並用兩個浮動的DIV來實現這一佈局。

服務器端代碼將迭代項目並創建一個新的DIV，如果它通過中途點（當前索引> =一半長度）。

生成的HTML看起來像下面這樣：

<div class="container"> 
    <div class="column"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
    </div> 
    <div class="column"> 
    <div>Item 4</div> 
    <div>Item 5</div> 
    </div> 
    <div style="clear: both"></div> 
</div>

CSS：

.column { float: left; }

服務器端將確定何時關閉並創建一個新的DIV。不漂亮，但它的作品。

來源

2009-07-02 13:55:12

嘗試本文從AListApart，幾乎涵蓋所有的基礎

來源

2009-07-02 11:35:54 Tom

自動填充兩列

回答

相關問題