網格對齊問題

我有一個網頁，其中有5個相同的列的網格;每列有n個不同高度的盒子。網格對齊問題

所以這個網格的底部都被切碎了，每一排在不同的高度完成。

<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div>

和CSS

.row { 
    display: inline; 
    float: left; 
    width:20% 
}

我以後要多箱與再次

<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div>

問題添加到這些行（AJAX）的是，這些新的盒子不只是如我所期待的那樣放在每一行的下方，但相反，所有的行都與上一行中的最下一行對齊。

visual example here of issue

用什麼CSS我繞過這個問題？

來源

2017-04-25 Jack Swindle

如果你正在尋找一個CSS「磚石」佈局，可以使用CSS列

.rows { 
 
    column-count: 4; 
 
    column-gap: 1em; 
 
} 
 

 
.row { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
}

<div class="rows"> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
    <div class="row">asdf<br> aasdf 
 
    </div> 
 
    <div class="row">4</div> 
 
    <div class="row">5</div> 
 
    <div class="row">2<br>lines</div> 
 
    <div class="row">7</div> 
 
    <div class="row">two<br> lines</div> 
 
    <div class="row">8</div> 
 
    <div class="row">9</div> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
    <div class="row">asdf<br> aasdf 
 
    </div> 
 
    <div class="row">4</div> 
 
    <div class="row">two<br> lines</div> 
 
    <div class="row">6</div> 
 
    <div class="row">7<br>lines</div> 
 
    <div class="row">7.5</div> 
 
    <div class="row">8</div> 
 
    <div class="row">9</div> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
</div>

來源

2017-04-25 04:05:17

感謝您的回答，我知道我可能不夠清楚：S 柔性表並不是我想要的，因爲我想讓每個div都保持在不同的高度。而'明確：left'解決方案似乎basicly做，因爲我已經有一點相同：/ Basicly溶液中（如果我把你的第一個表），他們將1,2,3,4之間沒有間隙和5,2lines，7,8 –

結果我想要的效果不能用CSS來完成：/ http://stackoverflow.com/questions/32102623/forcing-div-stack-from-left向右＃32102623 http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights 感謝您的詳細解答！ –

@JackSwindle哦，你想要一個石工佈局？你可以使用css列http://w3bits.com/css-masonry/ –

如果您不介意高度不同，請使用display：inline-block和vertical-align：top代替左側的float。這是由每個「行」元素的高度不同造成的。

.row{ 
    display: inline-block; 
    vertical-align: top; 
    width:20%; 
}

你也可以考慮，使各要素相同的高度，其中使用任何彎曲或JavaScript，你檢查它的div具有最高的高度，它適用於所有元素。

，如果你希望它有不同的高度，並希望它填補了國內空白，請參考這個問題

CSS Floating Divs At Variable Heights

來源

2017-04-25 03:59:33

感謝您的回答！我試圖讓它與你的建議一起工作，但似乎無法得到想要的效果呢：/ 你能給出一個像Michael一樣的代碼片嗎？ –

啊感謝您的鏈接......結果不能用CSS來完成：/！ –

.multiple-column{ 
 
    list-style: none; 
 
    padding: 0; 
 

 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 20px; 
 
    -moz-column-gap: 20px; 
 
    column-gap: 20px; 
 
} 
 
.multiple-column li{ 
 
    background: gray; 
 
    margin-bottom:10px; 
 
}

<ul class="multiple-column"> 
 
    <li style="height: 100px">A</li> 
 
    <li style="height: 200px">B</li> 
 
    <li style="height: 150px">C</a></li> 
 
    <li style="height: 120px">D</li> 
 
    <li style="height: 120px">E</li> 
 
    <li style="height: 60px">F</li> 
 
</ul>

瀏覽器需要支持CSS3。

來源

2017-04-25 04:52:13 ChemicalRomance

Thx爲答案！問題是，我想div的順序從左到右。最後我去了Isotope插件，似乎是最直接的去 –

網格對齊問題

回答

相關問題