Question

我想有4个小组（部分）。

2个顶部应该沿着整个宽度。
另外两个应该是彼此相邻的。
最高层应该没有边距。
第二个面板应该没有上边距（并且没有底边距）避免使用下面的双重方法。

这里的问题是：彼此相邻的2个面板中间有一个双边距。在这种情况下，它是10 + 10.我需要它们为5，以便总共10px。但是，当我将此应用于我的代码时，剩下的额外空间将最终在右侧..

任何人都可以帮忙解决问题吗？重写任何代码以便改进（使其更易于维护）也是受欢迎的：）。

修改

我的容器宽度为240px，用于测试我制作的flex。当应用5的边距时，这会在右侧产生额外的空间。但是，应该有一种方法可以避免任何容器宽度的这个双边距。有没有人有解决方案？

修改不得不将flex-grow设置为true。现在5 +增长可能性的边际似乎解决了这个问题。无论我有什么容器尺寸。

body {
  background-color: #cccccc;
}

#container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  background-color: #444444;
  width: 270px;
}

#container > * {
  width: 100px;
  height: 100px;
  background-color: #228822;
  flex-basis: auto;
} 

#container .neighbour {
  flex: 1 1 auto;
  margin: 10px 0;
}

#container .solo {
  flex: 1 1 100%;
}

#container .solo.red {
  background-color: #ff0000;
}

#container .solo.small {
  height: 30px;
  margin: 0;
}

#container .solo.no-top {
  margin: 0 10px;
}

#container .left {
  margin-left: 10px;
  margin-right: 5px;
}

#container .right {
    margin-left: 5px;
  margin-right: 10px;
}

<div id="container">
  <section class="solo red small"></section>
  <section class="solo no-top"></section>
  <section class="neighbour left"></section>
  <section class="neighbour right"></section>
</div>

Answer 1

.no-right{
   margin-right:5px;
}

.no-left{
   margin-left:5px;
}

标记到样式表末尾的是否有效？

如何设置边距而不是在中间加倍？

1 个答案: