Pau*_*ool 5 html css column-count
我正在使用column-count. 使用列的问题是事实，就像文本一样，甚至图像也会损坏。所以图像的上半部分可以在一列中，下半部分可以在第二列中。我通过添加display: inline-block到列中的项目解决了这个问题。这让我解决了当前的问题：
acolumn-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%;
}
注释掉的部分是防止图像损坏的第二种方法，但它不如简单的display:inline-block. 它做完全相同的事情。
我尝试改变高度并使用clear.
更新
根据要求，一些背景信息/用例。
图像网格将用于餐厅的简单网站。它将在具有两种不同功能的多个页面上使用。功能一是在首页上，其中八张纵向或横向格式的图像将用作不同页面的链接。（8 幅图像被正确分割 [3][3][2]） 图像网格的第二个功能是作为图像网格。例如，这家餐厅有着悠久的历史，它们的图像可以追溯到近 100 年前。在此过程中可能会添加更多图像。使用列数而不是三个 div 可以更轻松地添加图像，并且非常容易做出响应。问题在于，对于某些数量的图像，例如 7，图像不会在列上正确划分。
更新 2
我尝试使用 Masonry 框架，但效果很差。
我在 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 上测试过，似乎没问题。
如果一切都失败了，你可以插入一个虚拟 div，尽管我觉得建议这样做很肮脏！（我不确定它是否适合您的设置）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#container {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
width: 100%;
}
.item {
background: red;
}
.item, .dummy {
display: inline-block;
height: 250px;
margin-bottom: 20px;
width: 100%;
}
</style>
</head>
<body>
<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="dummy"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>