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），以及每个单元格（200像素）

Answer 1

给定.table的容器width: 600px，只需将每个子div设置为width: 50%和float: left即可达到预期的效果。

<强> 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.更新了小提琴示例。

Answer 2

我建议使用CSS列：

<!-- note that I've used 'container' as an id, rather than just free floating
     the string within the tag (which would make it an invalid attribute) -->
<div id="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>

使用CSS：

#container {
    -moz-column-count: 3;
    -ms-column-count: 3;
    -o-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

JS Fiddle demo

显然这个解决方案需要浏览器实现CSS多列布局模块，可以使用CSS来测试给定CSS属性值对的浏览器支持（尽管这有问题，甚至更少） -well比CSS列支持，但是如果浏览器支持@supports ()语法，那么它很可能也支持列：

/* defaults, to style if columns are not supported: */
#container {
}
#container div {
    display: inline-block;
    height: 1.5em;
    line-height: 1.5em;
    text-indent: 0.5em;
    float: left;
    width: 30%;
    border: 1px solid #000;
    margin: 0 0.5em 0.2em 0.5em;
}
/* testing for support for the given property-name and the property-value: */
@supports (-moz-column-count: 3) or (-ms-column-count: 3) or (-o-column-count: 3) or (-webkit-clumn-count: 3) or (column-count: 3) {
    /* if the browser supports the property-name and property-value, the following styles are used, if the browser doesn't understand the syntax the rules are discarded */
    #container {
        -moz-column-count: 3;
        -ms-column-count: 3;
        -o-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    #container div {
        /* unset the 'if not supported' styling */
        display: block;
        float: none;
        /* aesthetics, just because; adjust to taste */
        width: 90%;
        margin: 0 auto 0.5em auto;
    }
}

JS Fiddle demo

现在，上面我说@supports有'问题';引用Eric Meyer：

如果CSS处理器接受该声明（而不是将其作为解析错误丢弃），则认为它支持声明（由属性和值组成）。如果处理器没有实现具有可用级别的支持，给定的值，则它不得接受声明或声明对它的支持。



所以在第一句话中，我们被告知的是“支持”意味着“接受[a]声明”并且不会将其丢弃在地板上，因为它无法识别。换句话说，如果浏览器解析property：value对，那么该资格对称为“support”。请注意，这句话没有说明解析后会发生什么。根据这一点，浏览器可能具有完全拙劣，部分且通常无法实现的属性：值对，但识别行为意味着存在“支持”。

<子> Reference: 'Unsupportable Promises', by Eric Meyer, accessed: 2013-10-03, 23:43 (British Summer Time)

尽管如此，似乎才能工作（在这种情况下，在Ubuntu 12.10上的Chromium 28中测试过），但显然可能是脆弱的。

参考文献：

Answer 3

这样的事情怎么样：

#hobby{
         display:inline-block;
         width: 197px;
         max-width:197px;
         height:200px;
         max-height:200px;
         margin:0px;
         margin-top:2px;
         overflow:hidden; 
}

http://jsfiddle.net/3m2NK/4/

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

3 个答案: