我正在尝试使用不同大小的图像创建选项拼接图,因此需要填充自由垂直空间。有什么方法可以使用 CSS 还是我需要以某种方式使用 JavaScript?
<style>
.options {
width: 1230px;
height: 100%;
margin: auto;
position: relative;
}
#stream .large {
width: 400px;
height: 575px;
opacity: 0.8;
position: relative;
float: left;
background: white;
}
#stream .big {
width: 400px;
height: 380px;
margin-bottom: 10px;
opacity: 0.8;
position: relative;
float: left;
background: white;
}
#stream .medium {
width: 400px;
height: 185px;
background: white;
margin-bottom: 10px;
opacity: 0.8;
position: relative;
float: left;
}
#stream .small {
width: 195px;
height: 185px;
background: white;
margin-bottom: 10px;
opacity: 0.8;
position: relative;
float: left;
}
</style>
最佳答案
不是真的;这就是 Javascript 库喜欢的 Masonry被 build 来做。 Masonry 易于使用,您应该可以将其放入并让它更紧密地排列您的元素。
关于CSS - 填充可用的剩余空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18926872/