0

我正在为一个人的爱好创建一个 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

容器将是固定大小（600 像素），以及每个单元格（200 像素）

4

3 回答 3

1

给定一个容器.table，width: 600px只需将每个子 div 设置为width: 50%andfloat: 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; **/
}

工作示例[更新 10/4]

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

于 2013-10-03T21:48:49.357 回答
1

我建议使用 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 小提琴演示。

显然，这个解决方案需要浏览器实现 CSS 多列布局模块，可以使用 CSS 来测试浏览器对给定 CSS 属性值对的支持（尽管这有其问题，而且支持得更差）比 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 小提琴演示。

现在，上面我说@supports有“问题”；引用埃里克·迈耶的话：

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

所以在第一句话中，我们被告知的是“支持”意味着“接受[a] 声明”并且不会将其作为它不承认的东西丢在地上。换句话说，如果浏览器解析一个属性：值对，那么这就是对所述对的“支持”。请注意，这句话没有说明解析后会发生什么。据此，浏览器可能有一个完全拙劣的、部分的、通常无法使用的属性：值对的实现，但识别的行为意味着存在“支持”。

参考：“不支持的承诺”，作者 Eric Meyer，访问时间：2013-10-03，23:43（英国夏令时间）

尽管如此，它似乎可以工作（在这种情况下，在 Ubuntu 12.10 上的 Chromium 28 中进行了测试），但显然可能很脆弱。

参考：

于 2013-10-03T22:44:14.123 回答
0

像这样的东西怎么样：

#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/

于 2013-10-03T21:50:08.917 回答