固定宽度可变高度网格css

我们如何在网格布局中实现固定宽度和可变高度，完全像www.pinterest.com主页布局。我认为他们正在使用Javascript。只是想知道是否有其他方法。只需使用float:left将不起作用。谢谢你的帮助。固定宽度可变高度网格css

来源

2012-03-06 bingjie2680

最简单的选择是使用jQuery Masonry插件。

如果你想通过CSS来完成，你必须浮动大的，等宽的列，然后在其中添加可变高度元素。

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 
<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

而CSS看起来就像这样：

.parent { 
    float: left; 
    width: 200px; /* adjust as needed */ 
} 

.child { 
    /* these are variable height */ 
}

来源

2012-03-06 13:13:15 Pat

这也是一个javascript。 – sandeep 2012-03-06 13:15:51

感谢您的脚本。一个问题是每个孩子的身高都在变化。所以如果说，在第一列中，所有的孩子都比其他列中的孩子高，那么第一列将比其他列长很多，这看起来不太漂亮。 :) – bingjie2680 2012-03-06 13:19:41

这就是javascript可以派上用场的地方。 Onload，您可以检查不同列的高度并移动'.child'元素，以便所有列大致相等。请注意，如果你打算这么做的话，不妨使用预制的东西。另一个类似砌体的lib是同位素：http://isotope.metafizzy.co/ – Pat 2012-03-06 13:39:50

可能是你可以使用CSS3 cloumn-count财产作为替代。就像这样：

.three-col { 
     -moz-column-count: 3; 
     -moz-column-gap: 20px; 
     -webkit-column-count: 3; 
     -webkit-column-gap: 20px; 
}

阅读这篇文章http://css-tricks.com/seamless-responsive-photo-grid/

检查此例如http://jsfiddle.net/pMbtk/55/

来源

2012-03-06 13:22:07 sandeep

这是一个巧妙的技巧 - 不知道'column-count'和'column-gap'属性。 – Pat 2012-03-06 13:41:33

唯一的缺点是你不能动态添加更多的元素，否则会搞乱块的顺序。 – 2013-11-04 15:23:16

固定宽度可变高度网格css

回答

相关问题