网格对齐问题
我有一个网页,其中有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)的是,这些新的盒子不只是如我所期待的那样放在每一行的下方,但相反,所有的行都与上一行中的最下一行对齐。
用什么CSS我绕过这个问题?
如果你正在寻找一个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>
如果您不介意高度不同,请使用display:inline-block和vertical-align:top代替左侧的float。这是由每个“行”元素的高度不同造成的。
.row{
display: inline-block;
vertical-align: top;
width:20%;
}
你也可以考虑,使各要素相同的高度,其中使用任何弯曲或JavaScript,你检查它的div具有最高的高度,它适用于所有元素。
,如果你希望它有不同的高度,并希望它填补了国内空白,请参考这个问题
感谢您的回答! 我试图让它与你的建议一起工作,但似乎无法得到想要的效果呢:/ 你能给出一个像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。
Thx为答案! 问题是,我想div的顺序从左到右。 最后我去了Isotope插件,似乎是最直接的去 –
感谢您的回答, 我知道我可能不够清楚:S 柔性表并不是我想要的,因为我想让每个div都保持在不同的高度。 而'明确:left'解决方案似乎basicly做,因为我已经有一点相同:/ Basicly溶液中(如果我把你的第一个表),他们将1,2,3,4之间没有间隙和5,2lines,7,8 –
结果我想要的效果不能用CSS来完成:/ http://*.com/questions/32102623/forcing-div-stack-from-left向右#32102623 http://*.com/questions/5234749/css-floating-divs-at-variable-heights 感谢您的详细解答! –
@JackSwindle哦,你想要一个石工布局?你可以使用css列http://w3bits.com/css-masonry/ –