我正在寻找一种以表格/表格形式呈现 N 幅图像的方法。
问题是,它需要处理窗口调整大小或不同的分辨率并重新安排自己。
我可以在我的元素中使用 JQuery,但如果可能的话,当然会更好。
最佳答案
当父元素调整大小时,图像会自然回流。
http://codepen.io/cimmanon/pen/dwbHi
现在如果你想让元素之间的间距均匀分布,Flexbox 可以帮助你:
http://codepen.io/cimmanon/pen/iHGCd
.gallery {
margin: -5px;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-pack: justify;
-ms-flex-pack: justify;
flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
@supports (flex-wrap: wrap) {
.gallery {
display: flex;
}
}
.gallery img {
margin: 5px;
}
<div class="gallery">
<img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x120" /><!--
--><img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x140" /><!--
--><img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x130" /><!--
--><img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x100" /><!--
--><img src="http://placehold.it/200x90" />
</div>
当前支持的浏览器:Chrome、Opera、IE10。 http://caniuse.com/#feat=flexbox
或者,您可以使用 CSS Columns(与上面相同的标记):
.gallery {
-webkit-columns: 250px;
-moz-columns: 250px;
columns: 250px;
text-align: center;
}
关于javascript - 灵活的图像表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15771683/