如何製作調整大小以適應頁面寬度的HTML網格？

Question

我想要以編程方式寫入頁面的鏈接數量是可變的。我寧願沒有一個長列表，但列出一個或多個列中的鏈接。然而，我不想強​​制一個具有特定列數的表...而是我想指定列寬（或讓每列自動適應最寬的元素）。

這是可以使用普通的HTML/CSS？作爲參考，我在C＃（.NET2）中這樣做了，但是如果有人想在代碼中使用bash，那麼任何僞都是很好的 - 輸入就是我想要寫入頁面的數組/列表。

Answer 1

您可以使用的內聯名單。考慮每個項目具有固定寬度的水平列表。

link1.....link2.....link3.....link4..... 
link5.....link6.....link7.....link8..... 
link9.....link10....link11.... 

依此類推。所有你需要的是讓你的清單（ul）內嵌，然後每個項目（li）具有固定的寬度。

下面是使用Twitter的引導工作演示（的概念是相同的）：http://jsfiddle.net/FXkYr/

如果你不想使用Twitter的引導這裏有相關的HTML CSS &你將需要使用：

HTML：

<ul> 
    <li><a href="#">link1</a></li> 
    <li><a href="#">link2</a></li> 
    <li><a href="#">link3</a></li> 
</ul> 

CSS：

ul { 
    margin-left: 0; 
    list-style: none; 
} 

li { 
    width: 100px; 
    display: inline-block; 
    padding-left: 5px; 
    padding-right: 5px; 
    /* The following two lines is because IE is funny... */ 
    *display: inline; 
    *zoom: 1; 
} 

Answer 2

這裏是你可以做的一種方式：http://jsfiddle.net/vYtBM/

有不同的方式加載後，你可以做到這一點，雖然是公平的。通過在每個LI內部具有錨標籤的無序列表將是另一種方式。

<div class="container"> 
    <a href="#">Link #1</a> 
    <a href="#">Link #2</a> 
    <a href="#">Link #3</a> 
    <a href="#">Link #4</a> 
    <a href="#">Link #5</a> 
    <a href="#">Link #6</a> 
    <a href="#">Link #7</a> 
    <a href="#">Link #8</a> 
    <a href="#">Link #9</a> 
</div> 

.container { 
    overflow: hidden; 
    width:960px; 
} 

.container a { 
    display: inline-block; 
    width: 440px; 
    padding: 10px; 
    background: #ccc; 
    margin: 0 20px 20px 0; 
    float: left; 
}