5

我正在使用column-count. 使用列的问题是，就像文本一样，甚至图像也会损坏。因此，图像的上半部分可以在一列中，而下半部分可以在第二列中。我通过添加display: inline-block到列中的项目解决了这个问题。这让我遇到了当前的问题：
对于column-count3 个项目和 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 框架，但效果不佳。

4

4 回答 4

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 上测试过，似乎还可以。

于 2019-06-25T13:56:40.553 回答
2

如果一切都失败了，你可以插入一个虚拟 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>
于 2014-05-22T07:43:25.667 回答
1

根据您的用例，如果columns不需要使用布局，您可以使用plaindisplay:inline-block;或maybe模拟它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;
}
于 2014-05-22T08:00:01.420 回答
0

只需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]
于 2020-10-19T15:07:01.000 回答