如何像在Pinterest中一样在CSS中垂直捕捉div

时间:2014-03-11 09:07:56

标签: html css css-float

我有4个div向左浮动,我可以看到2个。

.box {
  width: 50%;
  border: 1px solid red;
  float: left;
  box-sizing: border-box;
}

Divs没有拼凑在一起。我的意思是我不喜欢那个垂直的白色空间: - )

调查Pinterest我发现他们使用position: absolutetopleft。这很疯狂,我想有些JS负责计算。

这是JS Bin:http://jsbin.com/kurayama/4/edit

是否可以使用更简单的CSS?

4 个答案:

答案 0 :(得分:1)

您需要使用Javascript来完成您的要求,这是一个受欢迎的库Isotope

答案 1 :(得分:1)

我不知道用css单独做一个简单的方法,但我很确定pinterest使用像isotope这样的脚本。

答案 2 :(得分:0)

Isotope很酷,但与Foundation CSS框架存在一些冲突。

然后我找到了Packery。它只是有效。

http://packery.metafizzy.co

答案 3 :(得分:0)

Bootstrap 4没有提供card-columns形式的解决方案