Pinterest样式布局与CSS，但水平堆叠而不是垂直堆叠 [英] Pinterest Style Layout with CSS, but stacked horizontally instead of vertically

问题描述

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

I'm trying to create a pinterest style layout without using Packery or any JS. I've tried using CSS3 columns, but they stack vertically.

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

column-count: 3;

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

is what I've used and the cards are appearing as 1, 6, 11 and so on. Is it possible to display as 1, 2, 3??

我试图解决的目的是一个带有动态内容的网格布局，其中图像大小（高度）将变化（类似于pinterest），但只有在手头知道图像的高度时才可以安排包装。我在滚动时懒得加载图片和取卡。

The purpose I'm trying to solve is a grid layout with dynamic content where images sizes (height) will vary (similar to pinterest), but packery can arrange only if height of the image is known before hand. I'm lazy loading images and fetching cards as you scroll.

谢谢！

推荐答案

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

If you use columns, that's how the content will be stacked - in columns, i.e. vertically.

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

If you want to stack the content horizontally, you need to set the width of the container to auto, the height to a set pixel amount (e.g. 600px), and make sure that the overflow is shown. Then, you can add your grid items into the div (make sure that they are floated left), and they'll start stacking up horizontally.

这种方式很遗憾，由于高度不同，网格中存在一些空白，但如果你有这样的网格：
网格
并想要横向编号，这并不容易。我想这就是为什么创建一个水平排序的动态网格并不那么简单。

This way it unfortunately presents some gaps in the grid because of the different heights, but if you have a grid like this: Grid and want to horizontally number these, it's not that easy. I guess this is why it's not that simple to create a dynamic grid sorted horizontally.

这篇关于Pinterest样式布局与CSS，但水平堆叠而不是垂直堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！