html - 强制 div 到下一列

Question

我正在使用 column-count 创建图像网格。使用列的问题在于，就像文本一样，甚至图像也会被破坏。所以图像的上半部分可以在一列中，下半部分可以在第二列中。我通过将 display: inline-block 添加到列中的元素来解决这个问题。 这让我遇到了当前的问题:
column-count 为 3 且有 7 个元素时，元素显示为 [3][3][1]。

[item]   [item]   [item]
[item]   [item]
[item]   [item]

我希望元素显示为 [3][2][2]。所以问题是:我可以强制其中一个 div 到下一列吗？

HTML

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

#container {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    width: 100%;
}
.item {
    background: red;
    /*-webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;*/
    display: inline-block;
    height: 250px;
    margin-bottom: 20px;
    width: 100%;
}

jsfiddle

被注释掉的部分是防止图像损坏的第二种方法，但它比简单的 display:inline-block 更受支持。它做完全相同的事情。

我尝试改变高度并使用 clear。

更新
根据要求，一些背景信息/用例。
图像网格将用于餐厅的简单网站。它将在具有两个不同功能的多个页面上使用。功能一位于首页，其中八张纵向或横向格式的图像将用作指向不同页面的链接。 (8 个图像被正确划分 [3][3][2])图像网格的第二个功能将是图像网格。例如，这家餐厅历史悠久，图片可追溯到近 100 年前。在此过程中可能会添加更多图像。使用列数而不是三个 div 可以更轻松地添加图像并且 super 容易做出响应。问题在于，对于一​​定数量的图像，例如 7 个，图像无法在列上正确划分。

更新 2
我尝试使用 Masonry 框架，但效果很慢。

Answer 1

我在 2019 年寻找解决方案，我找到了。您可以使用此技巧跳转到 css 列计数布局中的下一列:

<div id="container">
   <div class="item"></div>
   <div class="item"></div>    
   <div class="item"></div>
   <div class="item"></div>
</div>

#container {
    column-count: 3;
}
.item {
    break-inside: avoid-column;   
}
.item:nth-of-type(2){
    break-after:column;
    display:block;
}

这将向第二个“.item”元素添加一个 display:block 属性以强制中断，第三个“.item”将显示在下一列的顶部。

查看一个工作示例: http://jsfiddle.net/n3u8vxLe/2/

刚在 Chrome 75、IE 11、Firefox 67 上测试过，好像没问题。