如何制作调整大小以适应页面宽度的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; 
}