如何像Pinterest这样在CSS中将div垂直对齐

斯蒂芬·休斯卡(Stefan Huska)

我有4个div浮动到左侧,并且我可以看到连续2个。

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

div并没有齐齐。我的意思是我不喜欢垂直的空白:-)

Pinterest的调查,我发现他们使用position: absolute,和topleft太疯狂了,我想有些JS负责计算。

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

使用更简单的CSS可以做到吗?

斯蒂芬·休斯卡(Stefan Huska)

同位素很酷,但是与Foundation CSS框架存在一些冲突。

然后我找到了Packery。它只是工作。

http://packery.metafizzy.co

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何像Pinterest中那样垂直对齐内联块?

来自分类Dev

如何像Pinterest中那样垂直对齐内联块?

来自分类Dev

如何在CSS的div中垂直对齐元素?

来自分类Dev

CSS问题:垂直对齐标签DIV

来自分类Dev

CSS-<p>垂直对齐<div>

来自分类Dev

CSS:在div顶部垂直对齐文本

来自分类Dev

Div垂直对齐

来自分类Dev

<div>垂直对齐

来自分类Dev

Div垂直对齐

来自分类Dev

如何在体内垂直对齐div?

来自分类Dev

如何垂直对齐此div?

来自分类Dev

如何在像网格一样显示的 div 中垂直对齐文本?

来自分类Dev

如何使文本垂直对齐顶部CSS

来自分类Dev

如何垂直对齐CSS列内容?

来自分类Dev

css列如何垂直对齐底部?

来自分类Dev

如何将这个垂直对齐的div右对齐?

来自分类Dev

使用css将div垂直对齐到div

来自分类Dev

CSS3:如何在div中垂直对齐文本?

来自分类Dev

如何在CSS中创建此形状?(垂直对齐div)

来自分类Dev

如何设置存在于div标签中的元素的垂直对齐方式以css为中心?

来自分类Dev

垂直对齐固定的div

来自分类Dev

使DIV在中间垂直对齐

来自分类Dev

div垂直对齐中心

来自分类Dev

垂直对齐选定的div

来自分类Dev

如何在div内部垂直对齐div?

来自分类Dev

CSS3:多个旋转的div垂直对齐

来自分类Dev

不要在div CSS中对img进行垂直对齐

来自分类Dev

CSS-div的垂直对齐作为列表项

来自分类Dev

CSS3:多个旋转的div垂直对齐