强制 div 到下一列答案

【问题标题】：Force div to next column强制 div 到下一列
【发布时间】：2014-07-11 02:48:01
【问题描述】：

我正在使用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
我尝试使用 Masonry 框架，但效果不佳。

【问题讨论】：

你能解释一下这个用例吗？也许还有另一种方法可以模拟column 布局？

标签： html css column-count

【解决方案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>

【讨论】：

目前我可以使用它。谢谢。如果没有其他（更好的）答案出现，我会接受这个。
为我工作！你介意输入为什么你说这很脏吗？也许把你的 2 美分放在什么是“正确”的方式上？
这很“脏”，因为最好避免纯粹出于显示目的添加 HTML。如今，网格将是一个更好的选择。

【解决方案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;
}

【讨论】：

问题是物品的高度是可变的。你的方法会导致看起来不太好的项目之间的间隙。
啊哈，我明白了，我有另一个可能可行的想法，如果可行，我会在几分钟后回来发表评论。
无法让它为 3 列工作 :( jsfiddle.net/A4ZLc/3 这是我所能接受的。
我明白你在做什么。我很感激我的努力，这似乎是很大的努力。不过，我完全赞成简单的解决方案。
不客气！顺便说一句，如果您对 javascript 解决方案持开放态度，那么这将很容易，无需使用任何库。

【解决方案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;
}

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

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

刚刚在 Chrome 75、IE 11、Firefox 67 上测试过，似乎还可以。

【讨论】：

请注意，以防其他人来这里查看。 break-after:column不在 FF 76 及以下版本的 Firefox 中工作。caniuse.com/#search=column

【解决方案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]

【讨论】：