固定寬度可變高度網格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

回答

相關問題