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可以更轻松地添加图像，并且可以非常轻松地进行响应。问题是，对于一定数量的图像，如7，图像不能在列上正确分割。

更新2
我尝试使用砌体框架，但工作缓慢。

Answer 1

如果所有其他方法都失败了，你可以插入一个虚拟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>

Answer 2

根据您的使用情况，如果不需要使用columns布局，您可以使用普通display:inline-block;或display:table进行模拟。

对于display:inline-block替代方案，这里有一个小提琴：

http://jsfiddle.net/A4ZLc/1/

#container {
//    column-count: 3;
//    -moz-column-count: 3;
//    -webkit-column-count: 3;
    width: 100%;
    font-size:0px;
}
.item {
    background: red;
    display: inline-block;
    height: 100px;
    margin-bottom: 20px;
    box-sizing: border-box;
    width: 33%;
    padding-right: 10px;
    background-clip: content-box;
    font-size: 12px;
}

使用display:inline-table

http://jsfiddle.net/A4ZLc/2/

#container {
//    column-count: 3;
//    -moz-column-count: 3;
//    -webkit-column-count: 3;
    width: 100%;
    display:inline-table;
}
.item {
    background: red;
    height: 100px;
    box-sizing: border-box;
    width: 33%;
    padding-right: 10px;
    background-clip: content-box;
    float:left;
    margin-bottom: 20px;
}

Answer 3

我一直在寻找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;
}

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

查看一个有效的示例： http://jsfiddle.net/n3u8vxLe/2/

只需在Chrome 75，IE 11，Firefox 67上对其进行测试，就可以了。

Answer 4

仅对孩子使用column-count: 3和width: 100*会对我有帮助：

.cols {
  column-count: 3;
}
.cols > * {
  display: block;
  width: 100%;
}

显示：

[item 1]  [item 5]  [item 9]
[item 2]  [item 6]  [item 10]
[item 3]  [item 7]  
[item 4]  [item 8]

强制div到下一列

4 个答案: