html - 内联 block 填充/边距问题

Question

我想要发生的事情:两个白色 div 永远不应该改变宽度。但是随着窗口变小，它们周围的橙色空间应该变小。当窗口变得太小以至于两个盒子无法并排放置时，我希望盒子在彼此下方弹出。检查我的图片以便更好地理解。

目前我在两个白色 div 之间放置了一个 WrongSpaceDiv 作为占位符。这工作正常，除了 WrongSpaceDiv 的宽度不会随着窗口变小而变小。

填充和边距似乎不起作用(当然除非我用错了)因为你需要将它们设置得如此之大，以至于盒子过早地相互弹出。

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

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>