这是一个类似问题的小提琴: http://jsfiddle.net/DougCassidy/Gawe7/ 它工作得很好,但是,我希望盒子之间有一些很好的间距。如果将右边距视为框之间的最小间距,那么如果间距低于该量,则会将所有内容向下移动。此外,当前连续的最后一个框中应该没有右边距。
然后,一些底部保证金。固定数量也可以,或者等于当前水平间距的数量可能也不错。
$(new Array(9).join('<div class="invisible"></div>\n')).insertBefore('.stretch');
$(window).on('resize', function() {
$('#container').height($('.box').last().position().top + $('.box').last().outerHeight());
//make it still justify when there's only one row
if ($('.box').first().position().top == $('.box').last().position().top) {
$('.invisible').hide();
} else {
$('.invisible').show();
}
}).resize();
答案 0 :(得分:0)
你不需要JavaScript,只是负利润:
http://codepen.io/cimmanon/pen/iHGCd
.gallery {
margin: -5px;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
@supports (flex-wrap: wrap) {
.gallery {
display: flex;
}
}
.gallery img {
margin: 5px;
}
HTML:
<div class="gallery">
<img src="http://placehold.it/200x100" />
<!-- etc -->
</div>
由于边距不会在弹性项目上崩溃,因此如果您在所有方面添加边距,则效果最佳。