Question

我正在尝试在html中创建这种布局......

1 2 3 4 5
6 7 8 9 10

我如何限制每行显示的数量？

你可以在不使用桌子的情况下实现这种布局吗？如果是这样，怎么样？

Answer 1

尝试使用“master”并使用相同的类将元素插入其中：

<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 2

不完全确定为什么要在没有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/

Answer 3

无法指定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>

如何限制每行的细胞？

3 个答案: