带有 CSS 的 Pinterest 样式布局，但水平堆叠而不是垂直堆叠 [重复]答案

【问题标题】：Pinterest Style Layout with CSS, but stacked horizontally instead of vertically [duplicate]带有 CSS 的 Pinterest 样式布局，但水平堆叠而不是垂直堆叠 [重复]
【发布时间】：2016-08-29 10:45:50
【问题描述】：

我正在尝试在不使用 Packery 或任何 JS 的情况下创建一个 pinterest 样式的布局。我尝试过使用 CSS3 列，但它们是垂直堆叠的。

看这里的小提琴， https://jsfiddle.net/2otpzbgt/1/

column-count: 3;

是我用过的，卡片显示为 1、6、11 等。是否可以显示为1、2、3？？

我试图解决的目的是具有动态内容的网格布局，其中图像大小（高度）会有所不同（类似于 pinterest），但只有事先知道图像的高度，packery 才能安排。我懒得在你滚动时加载图片和获取卡片。

谢谢！

【问题讨论】：

标签： javascript css masonry packery

【解决方案1】：

删除column-fill: auto;，你的问题就解决了

【讨论】：

是的，我试过了，但显然默认属性 'column-fill: balance' 只适用于 firefox
根据 w3schools 你可以使用 -webkit-column-fill: balance;适用于 Chrome、Safari、Opera
你有没有试过上面的解决方案。它对我来说很好
是的，我试过了，还是显示1、6、11：jsfiddle.net/2otpzbgt/2
@noni 但colum-fill 仅在 Firefox 中支持：w3schools.com/cssref/css3_pr_column-fill.asp

【解决方案2】：

如果您使用列，这就是内容的堆叠方式 - 列中，即垂直。

如果要水平堆叠内容，则需要将容器的宽度设置为自动，将高度设置为设置的像素量（例如 600 像素），并确保显示溢出。然后，您可以将网格项目添加到 div 中（确保它们向左浮动），它们将开始水平堆叠。

不幸的是，由于高度不同，它会在网格中出现一些间隙，但是如果您有这样的网格： Grid 并且想要对这些进行横向编号，这并不容易。我想这就是为什么创建一个水平排序的动态网格并不是那么简单的原因。

【讨论】：

谢谢，但就像我提到的，我不能随意设置高度，因为所有图像高度都是随机的，无法事先找到。
我的意思是设置容器的高度，而不是实际的网格项。
我编辑了你的 jsfiddle：jsfiddle.net/2otpzbgt/3
但是现在有差距？？我不想要哪个？（在 chrome 上测试）
我知道了，但我想知道，你如何在一个看起来像这样的网格中对项目进行水平编号：i.stack.imgur.com/5er1Z.png

【解决方案3】：

我最终删除了所有列。我知道这很激进，但你能用这样的东西吗？这或多或少是我对我的网站进行编码的方式。只需更改 .pin 中的宽度即可使其响应：https://jsfiddle.net/costumingdiary/p0czqdz0/

#columns {
margin:.5%;
}

.pin {
width:20%;
vertical-align:top;
display:inline-block;
background-color:#fff;
padding:1%;
margin:1%;
}
.pin img {
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}

.pin p {
font: 12px/18px Arial, sans-serif;
color: #333;
margin: 0;
min-height:100px;
}

【讨论】：