CSS固定大小的边距仅在元素之间。

Question

CSS固定大小的边距仅在元素之间。

5

这个问题在某些项目中一直存在，我想看看是否有更好的解决方案。基本上，我正在尝试拥有一组 div 元素，它们之间具有相等的间距，但不是四周都有间距。下面的代码片段是我要寻找的示例，我希望有人能提供更简洁的解决方案。

我的问题是，是否有更好的解决方案，可以使用更少的 CSS 或 HTML 元素。需要维护以下重要事项：

- 本地化兼容 - 由于我们没有使用 margin-left 或 margin-right，在 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>

- k2snowman69

内边距还是外边距？你的标题写着“内边距”，但其他地方我看到的都是外边距。 - The One and Only ChemistryBlob

我不太确定你的目标是什么，但可能尝试在内部元素上使用margin:20px，在外部元素上使用margin:-20px，这样最左边和最右边的项目看起来紧贴着两侧。 - Chris Smith

@TheOneandOnlyChemistryBlob修正了标题中的填充。 - k2snowman69

1

"justify-content: space-around;"解决不了你的问题吗？ :-/ - Marouen Mhiri

1

@k2snowman69 我想不出更好的解决方案了... :) - kukkuz

显示剩余4条评论

3个回答

1

尸补术，但我想补充一下，如果你只处理一行/一列，那么实现这个的一个相当快速的方法是使用last-child伪类选择器来覆盖margin为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

- cr4z

0

如果你知道 fixedwidth 区域中始终有五个框，可以这样做：

HTML（Slim）

.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

- skube

真的，但我认为这个解决方案更糟糕的原因是它只能与不同的间隔绑定您的HTML和CSS在一起。我提供的解决方案允许HTML成为任何它想成为的东西，所有实际的布局都通过CSS完成，保持层之间的分离。 - k2snowman69

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- skube · Accepted Answer

我认为需要注意的是，使用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>
    &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>

CodePen here