Pinterest样式布局与CSS，但水平堆叠而不是垂直堆叠

Question

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

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

column-count: 3;

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

我试图解决的目的是一个具有动态内容的网格布局，其中图像大小（高度）会发生变化（类似于pinterest），但只有在图像高度已知的情况下，包装厂才能进行排列。当你滚动时，我很懒地加载图像和获取卡片。

谢谢！

Answer 1

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

Answer 2

如果使用列，则内容将按列堆叠，即垂直堆叠。

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

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

Answer 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;
}