Question

这在某些项目中不断出现，我想看看是否有人可能有更好的解决方案。

基本上，我正在尝试使用一组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>

Answer 1

我认为应该注意这对CSS Grid来说是微不足道的。

＆＃13;

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;
}

＆＃13;

<div class="container">
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
</div>
<div class="container fixed-width">
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
  <div>
    &nbsp;
  </div>
</div>

＆＃13;

CodePen here

Answer 2

如果您知道总是在fixedwidth框中有5个框，您可以执行以下操作：

HTML（超薄）

.container
  - 5.times do
    .box

.container.container--thinner
  - 15.times do
    .box

CSS（SCSS）

$width : 36;
body {background-color: #000;}
.container {
  display:flex;
  flex-wrap: wrap;
  background-color: white;
  margin-bottom: 2em;
  width: $width + em;

  .box {
    width: 2em;
    height: 2em;
    margin-right: 2em;
    background-color: red;
  }

  &--thinner {
    justify-content: space-between;
    width: $width/2 + em;

    .box {
      margin-bottom: 2em;
      &:nth-of-type(5n) {
        margin-right: 0;
      }
    }
  }
}

这里是Codepen

Answer 3

看起来答案目前不是......这似乎是解决此问题的最佳方法。谢谢大家！

Answer 4

微不足道，但是我想补充一点，如果您只处理行/列，那么一种完成此目的的快速方法是使用最后一个孩子的伪选择器将边距改写为0。像这样：

.column-item {
  width: 5px;
  height: 5px;
  background-color: red;
  margin-bottom: 20px;
}

.column-item:last-child {
  margin: 0;
}

beginning
<div id="column">
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
<div class="column-item"></div>
</div>
end

仅在元素

4 个答案: