CSS动态响应列布局

Question

我一直在寻找答案,但找不到任何解决我问题的方法.

我有一个包含动态内容的网站.我想要的是内容尽可能流入列中,以尽量减少滚动.

这些物品具有动态高度.

  xxx item 1 xxx  |  xxx item 4 xxx
  xxxxxxxxxxxxxx  |  xxxxxxxxxxxxxx
  xxxxxxxxxxxxxx  |------------------
------------------|  xxx item 5 xxx
  xxx item 2 xxx  |  xxxxxxxxxxxxxx
  xxxxxxxxxxxxxx  |------------------
------------------|  xxx item 6 xxx
  xxx item 3 xxx  |  xxxxxxxxxxxxxx
  xxxxxxxxxxxxxx  |  xxxxxxxxxxxxxx

但是当调整浏览器窗口大小时,我想将内容放在一个列表中,所以一列表.

我知道媒体查询,但是如何配置它以便当窗口足够宽时它会流入2列布局？

同样重要的是,项目(下面的HTML中的"group"div)不会在底部分成两半.

内容HTML(使用KnockoutJS作为动态数据,groupContainer中的内容因groupContainer中的foreach属性而重复):

<div data-bind="foreach: $data.groups" class="groupsContainer">
    <div class="group">
        <div data-bind="text: $data.name" class="groupTitle"></div>
        <table data-bind="foreach: $data.fields" class="fieldsContainer">
            <tr>
                <td data-bind="text: $data.name" class="fieldName"></td>
                <td data-bind="template: { name: $data.typeId, data: $data}" class="fieldValue"></td>
                <td class="valueChanged" data-bind="if:$data.valueChanged"><img
                    src="resources/images/control-state-edited.png" /></td>
            </tr>
        </table>
    </div>
</div>

CSS:

.groupsContainer {
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #eee;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee;
    column-count: 2;
}

Answer 1

虽然你正在使用的项目,而不是文本的下面仍然可以工作,只是包装的物品放入容器中应用了下面的CSS(替换div用id或class这个容器的).

看看下面 - 列将自动压缩到较小的屏幕尺寸,而无需媒体查询.

演示小提琴

CSS:

html, body {
    width:100%;
}
div {
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #eee;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee;
    column-count: 2;
}

或者 - 使用媒体查询

如果您想要更多控制 - 您只需使用媒体查询来应用大小超过指定大小的列(低于1024)

html, body {
    width:100%;
}
@media screen and (min-width: 1024px){
    div {
        -webkit-column-width: 20em;
        -webkit-column-gap: 2em;
        -webkit-column-rule: 1px solid #eee;
        -webkit-column-count: 2;
        -moz-column-width: 20em;
        -moz-column-gap: 2em;
        -moz-column-rule: 1px solid #eee;
        -moz-column-count: 2;
        -ms-column-width: 20em;
        -ms-column-gap: 2em;
        -ms-column-rule: 1px solid #eee;
        -ms-column-count: 2;
        column-width: 20em;
        column-gap: 2em;
        column-rule: 1px solid #eee;
        column-count: 2;
    }
}

防止元素在列之间断开

为避免元素在列之间被破坏,您可以使用以下内容:

.group{ /* class to restrict breaking on */
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden; /* optional */
    display:inline-block; /* optional */
}

这就是说,注意浏览器之间的功能的支持可能是不完整,如果它不是按预期工作,更换display:inline-block;用display:table;或完全删除.