如何限制每行的單元格？

Question

我試圖創建這種在HTML佈局...

1 2 3 4 5 
6 7 8 9 10 

我怎麼會限制多少每行顯示？

您可以在不使用表格的情況下實現這種佈局嗎？如果是這樣，怎麼樣？

Answer 1

沒有辦法來指定的HTML表格的高度和寬度（以細胞數），因爲每個細胞必須由自身與<td>和</td>標籤（靜置表數據）來指定。但是，您可以指定表格的寬度（以像素或頁面的百分比或點數等）。您還可以確定文本的對齊方式，或者CSS可以定義的其他任何內容。見css zen garden。從而

我會使用的基本表中的代碼如下：

<table > <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr> </table>

Answer 2

嘗試具有「主」和插入元件右到它都具有相同的類：

<div id="master"> 
    <div class="cell"> 
    Your data goes here! 
    </div> 
    <!-- ... ... more cell elements ... ... ... --> 
</div> 

你需要擺弄你的CSS，但是爲每個「單元格」項目使用百分比寬度...例如：

#master { 
    margin-left: 10%; 
    margin-right: 10%; 
} 
.cell { 
    width: 23%; /* This is for appx. 4 per row, it leaves 1% for margin, etc. */ 
    height: 150px; 
} 

基本上我會亂搞百分比，直到它看起來適合你。要確定每個單元使用的百分比，您需要將其分爲100個，並將其除以所需元素的數量。然後你會適當調整（向下）。

我是某些有一個更好的方法來做到這一點，但這是我在過去取得了類似的效果，並且頁面效果很好。

Answer 3

不完全確定爲什麼你想要這樣做沒有table，但你可以使用下面的css display規則。

div#container{display: table;} 
div#row{display: table-row;} 
div#row div{display: table-cell; border:1px solid red;} 

邊境只有例如

HTML

<div id="container"> 
    <div id="row"> 
     <div>Content</div> 
     <div>Content</div> 
     <div>Content</div> 
     <div>Content</div> 
     <div>Content</div>   
    </div> 
    <div id="row"> 
     <div>Content</div> 
     <div>Content</div> 
     <div>Content</div> 
     <div>Content</div> 
     <div>Content</div>   
    </div>  
</div> 

http://jsfiddle.net/jasongennaro/c7wY7/