Question

我正在使用display: table和display: table-cell属性在父级中均匀分布一些div。但是，它们都出现在同一行，所以如果它们太多，它会痉挛起来，如下所示：

我为孩子们设置了一个min-width但是被忽略了。有没有办法让孩子们超过一定高度时自动分成多行？我总是无法确定孩子的数量，所以我更喜欢只有一个父母。

HTML

        <div class="panel-body select-body">
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
            <div class="board">
                <input type="checkbox"><span class="select-label">/a/</span></input>
            </div>
        </div>

CSS

.select-body {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.board {
    border: 1px solid blue; /* temporary */
    width: 15%;
    min-width: 100px;
    height: 30px;
    display: table-cell;
}

.board > input[type="checkbox"] {
    vertical-align: middle;
    margin-left: 8px;
    margin-right: 5px;
}

.select-label {
    position: absolute;
    margin-top: 3px;
}

Answer 1

我不知道将它拆分成行的方法;表格单元格解决方案专门用于创建单行。

你真正想要的是flex-box。看看这里举例：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何自动将CSS模拟的表格单元格拆分为多行？

1 个答案: