这在某些项目上不断出现,我想看看是否有人可以找到更好的解决方案。
本质上,我正在尝试使一组div元素之间的间距相等,但周围没有间距。下面的代码段是我正在寻找的示例,我希望有人可以提供更干净的解决方案。
我的问题是,是否有人有更好的解决方案,可以使用更少的CSS或更少的HTML元素。要维护的重要事项:
符合本地化-由于我们不在左右使用边距,因此rtl中没有任何奇怪的本地化问题
对齐-如果不需要,它不应该调整整个窗口的大小,但是如果需要,可以包装。 (请参见示例)
间距-元素之间的间距应固定
如果您有任何想法,我希望能听到!
body {
background-color: black;
padding: 30px;
}
.inner {
overflow: hidden;
margin: 20px 0px;
}
.innerMargin {
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: -10px;
}
.innerMargin > div {
flex: 0 0 20px;
background-color: red;
margin: 10px;
height: 20px;
width: 20px;
}
.fixedWidth {
width: 180px;
}
<div class="inner">
<div class="innerMargin">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="inner fixedWidth">
<div class="innerMargin">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
最佳答案
我认为应该指出,这对于CSS Grid来说是微不足道的。
body {
background-color: #000;
}
.container {
display: grid;
grid-template: 20px/repeat(auto-fit, 20px);
grid-gap: 20px;
background-color: #FFF;
margin: 20px;
}
.container div {
background-color: red;
}
.fixed-width {
width: 180px;
}
.container > div {
background-color: red;
}
<div class="container">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="container fixed-width">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
CodePen here