jquery - 单元格元素的动态数量的 css table/div 格式

Question

我正在为一个人的爱好创建一个 HTML 布局。这个人可以选择 1-20 个他们喜欢的爱好。我想在 3 列的行中显示它们。有没有办法用 div 做到这一点，这样我就不必计算何时插入新行？例如，如果我使用一个表格，并且用户选择了 7 个爱好，它看起来像:

<tr><td>hobby 1</td><td>hobby 2</td><td>hobby3</td</tr>
<tr><td>hobby 4</td><td>hobby 5</td><td>hobby6</td</tr>
<tr><td>hobby 7</td><td></td><td></td</tr>

而且我必须知道何时插入新行(在获取数据时在服务器端)。这有点麻烦——我打印了另外 3 列了吗？好的，结束这一行并开始新的一行。

我想要这样的东西:

<div container>
<div>hobby 1</div>
<div>hobby 2</div>
<div>hobby 3</div>
<div>hobby 4</div>
<div>hobby 5</div>
<div>hobby 6</div>
<div>hobby 7</div>
</div>

输出如下:

hobby1   hobby2   hobby3
hobby4   hobby5   hobby6
hobby7

容器将是固定大小(600px)，以及每个单元格(200px)

Answer 1

给定一个 width: 600px 的容器 .table，只需将每个子 div 设置为 width: 50% 和 float:离开以达到您想要的效果。

HTML

<div class="table">
    <div>hobby 1</div>
    <div>hobby 2</div>
    <div>hobby 3</div>
    <div>hobby 4</div>
    <div>hobby 5</div>
    <div>hobby 6</div>
    <div>hobby 7</div>
</div>

CSS

.table {
    overflow: hidden; /** Contain floated elements **/
    width: 600px;
}

.table div {
    float: left;
    width: 33%; /** Or, a fixed pixel width of 200px; **/
}

Working example [10 月 4 日更新]

注意:更新为显示 3 列，而不是 2 列。更新了 Fiddle 示例。