html - 如何使内联 block 容器的左右边距始终相等？

Question

我在另一个容器中有一组容器。为了清楚起见，这里是 HTML:

<div class = "box-grouping">
    <div class = "box-section grey">
        <h2>What We Do</h2>
    </div>
    <div class = "box-section grey">
        <h2>Where We Are</h2>
    </div>
</div>

在首选分辨率下，两个框将并排放置，第一个框的左边距等于第二个框的右边距，加上每个框之间的一些空间。当我以我一半的分辨率设计时，它看起来像 this .很好，除了当我将分辨率提高到全尺寸时，它看起来像 this .如您所见，左右边距不相等。

我试过将左右边距设置为自动，但没有用。这是我正在使用的 CSS:

.box-section {
    display: inline-block;
    width: 40%;
    height: 300px;
    margin-left: 60px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

我希望页面在任何分辨率下看起来都像半分辨率屏幕截图。此外，容器在全分辨率下总是显得太大，但当我尝试缩小它们时，它们对于较小的分辨率来说太小了。任何帮助将不胜感激!

Answer 1

您可以将 text-align: center 设置为您的 .box-grouping 类以使框居中。然后，在您的 .box-section 类中，将 margin-left: 60px 更改为 margin: 0 30px 以对两者应用均匀边距.box-section div 的。

按照您目前的代码方式，您需要添加一个媒体查询来缩小框，以防止在较小的设备上换行。

.box-grouping {
  text-align: center;
}

.box-section {
  display: inline-block;
  width: 40%;
  height: 300px;
  margin: 0 30px;
  padding-top: 20px;
  border-radius: 10px;
  border: 2px solid black;
  text-align: center;
}

<div class="box-grouping">
  <div class="box-section grey">
    <h2>What We Do</h2>
  </div>
  <div class="box-section grey">
    <h2>Where We Are</h2>
  </div>
</div>