Question

在CSS中，边距涵盖了自己的顶部和底部边距。我需要在左右方向达到此结果。

- 编辑 -

元素应该左对齐

请参阅示例：

<div class="root">
<div class="a">
</div>
<div class="b">
</div>
<div class="c">
</div>
</div>

.a

在这种情况下，我需要：

.c右边距为12px

.a左边距为12px

如果只有.b和.a，我需要：

n右边距12px。

如果.root中有.element1个元素，我需要：

.element2右边距为6px

.element3左右边距为6px

.element4左右边距为6px

.....左右边距为6px

.elementn

{{1}}左边距6px

元素之间的摘要边距应为12px。但是第一个元素应该没有左边距，最后一个元素没有右边距。

我展示了如何手动操作，是否可以在CSS中设置它，如果从CSS级别我不知道我将拥有多少元素？

Answer 1

这样做

＆＃13;

.root
{
  display:flex;
  justify-content:space-between;
 }

.a{
  width: 100px;
  height: 100px;
  margin: 0 12px;
  border: 1px solid red;
}
.b{
  width: 100px;
  height: 100px;
  margin: 0 12px;
  border: 1px solid green;
}
.c{
  width: 100px;
  height: 100px;
  margin: 0 12px;
  border: 1px solid blue;
}
.root{
 display: flex;
  border: 1px solid black;
}

＆＃13;

<div class="root">
<div class="a">
</div>
<div class="b">
</div>
<div class="c">
</div>
</div>

＆＃13;

Answer 2

显而易见的答案是为每个孩子设置一半的余量，除了第一个孩子。

无法折叠水平边距。因此，如果你想要一个12px的间隙，你需要在所有孩子上设置一个6px的左/右边距，但在行的第一个元素上额外增加6px。

＆＃13;

.a {
  width: 100px;
  height: 100px;
  margin: 0 6px 0 12px;
  border: 1px solid red;
}

.b {
  width: 100px;
  height: 100px;
  margin: 0 6px;
  border: 1px solid green;
}

.c {
  width: 100px;
  height: 100px;
  margin: 0 6px;
  border: 1px solid blue;
}

.root {
  display: flex;
  border: 1px solid black;
}

＆＃13;

<div class="root">
  <div class="a">
  </div>
  <div class="b">
  </div>
  <div class="c">
  </div>
</div>

＆＃13;

Answer 3

一般情况下，我使用JavaScript来计算元素内部的数量，并使用数字添加正确的类。

在CSS中：

@margin: calc(@default_margin / 2);


   .row{
    margin: 0 @margin;
  }
  .row:first-child{
    margin-right: @margin;
    margin-left: 0;
  }
  .row:last-child{
    margin-left: @margin;
    margin-right: 0;
  }
  .column-2{
    .row:first-child{
      margin-left: 0;
    }
    .row:last-child{
      margin-right: 0;
    }
  }
  .column-1{
    .row:first-child{
      margin: 0;
    }
  }

在包装器内的元素之间创建空闲空间

3 个答案: