内联块填充/边距问题

Question

我想要发生的事情：两个白色的div应该永远不会改变宽度。但是当窗口尺寸较小时，它们周围的橙色空间应该变小。当窗口变得太小而不能让两个盒子彼此相邻时，我想让盒子互相弹出。检查我的图片以便更好地理解。

目前我在两个白色div之间放置了一个WrongSpaceDiv用作占位符。这种方法很好，除了WrongSpaceDiv的宽度随着窗口变小而变小的事实。

填充和边距似乎不起作用（除非我当然错误地使用它），因为你需要将它们设置得如此之大，以至于这些方框太早地以相反的方式弹出。

我需要一个允许我控制中间空间最大宽度的解决方案。随着窗户变大，外部空间可以不断变大。

html,
body {
  background-color: orange;
  margin: 0;
}

.MainDiv {
  text-align: center;
}

.WrongSpaceDiv {
  width: 100px;
  display: inline-block;
}

.TheDivs {
  width: 200px;
  height: 100px;
  top: 10px;
  position: relative;
  display: inline-block;
  background-color: white;
}

<div class="MainDiv">
  <div class="TheDivs">
  </div>
  <div class="WrongSpaceDiv">
  </div>
  <div class="TheDivs">
  </div>
</div>

Answer 1

您可以在容器中添加max-width并在其中使用flex来对齐项目：

html,
body {
  background-color: orange;
  margin: 0;
}

.MainDiv {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.TheDivs {
  width: 200px;
  height: 100px;
  margin: 10px auto;
  background-color: white;
}

<div class="MainDiv">
  <div class="TheDivs">
  </div>
  <div class="TheDivs">
  </div>
</div>