最佳答案
您可以尝试使用列来实现这一点。
HTML
<section id="photos">
<img src="images/image-1.jpg" alt="Some Image">
<img src="images/image-2.jpg" alt="Another Image">
...
</section>
CSS
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
还有一些媒体查询CSS
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
这是本文中的更多信息 Seamless Responsive Photo Grid
关于CSS Masonry 类型图像布局响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33166508/