我想用 css 或 javascript 像在图片上一样定位我的 block 。 一行最多四个 block ,其他对齐如图所示。我需要什么才能实现这一目标。
我试过用flex定位,但是flex还没有column-gap。此外 justify-content
对我没有帮助,因为这种情况下的 block 有不同的差距。也许它可以用网格定位,但我知道你只能用网格区域或网格列在 css 中硬编码值,但它只适用于静态数量。
ul {
display: grid;
grid-template-columns: repeat(8, 55px);
grid-template-rows: 1fr 1fr;
grid-gap: 25px;
list-style: none;
}
li {
width: 100%;
height: 50px;
background: #c4c4c4;
border-radius: 10px;
}
li:nth-child(1) {
grid-column: 1/3
}
li:nth-child(2) {
grid-column: 3/5
}
li:nth-child(3) {
grid-column: 5/7
}
li:nth-child(4) {
grid-column: 7/9
}
li:nth-child(5) {
grid-column: 2/4
}
li:nth-child(6) {
grid-column: 4/6
}
li:nth-child(7) {
grid-column: 6/8
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
我需要适用于不同数量的解决方案,但现在我只有静态
最佳答案
对于 justify-content: center,你必须给它一个边距,这样它们就不会粘在一起。它可以实现,但我不知道你是否愿意。查看我的代码片段以了解我在说什么。
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
}
li {
width: 20%;
height: 50px;
background: grey;
border-radius: 10px;
margin: 10px;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
关于javascript - 我如何使用 css 或 javascript 定位具有动态数量的图片 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58693359/