我有问题,我不知道如何解决,这很难解释,但我会尝试,也有图片来演示。浮动项目列表
我订购清单有问题,当李项目的下一行在第二行上有很多上面的行和下面的行之间的空间时,我会没有间距。
https://jsfiddle.net/52suh3pt/
- 我试图用浮动来解决:离开,但它的工作只针对一方。
看这张图片,左边是正确的,我想要的,右边是目前。
HTML:
<div>
<ul>
<li><img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg" alt=""></li>
<li><img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li>
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li>
</ul>
</div>
CSS:
div{
width:835px;
}
li{
display:inline-block;
list-style:none;
width:262px;
}
img{
width:100%;
}
尝试https://masonry.desandro.com/ –