不使用Grid/Flex，如何在父容器内均匀排列子容器？

核心问题拆解 #

你当前的实现存在三个关键错误：

1. HTML结构层级错误
   你期望的是「四个包含content的alignment-container子容器」，但实际代码里alignment-container和content是平级关系，直接放在父容器下，完全偏离了布局目标——每个子容器应该是一个alignment-container，内部嵌套对应的content。

2. inline-block的空白占位问题
   浏览器会把inline-block元素之间的换行、空格解析为空白字符，这些字符会占用宽度。四个width:25%的元素加上这些空白，总宽度会超过父容器的100%，导致最后一个元素被迫换行。

3. content的居中失效
   text-align:center仅对行内/inline-block元素生效，而content是块级元素，无法通过这个属性让它在alignment-container里居中。

修正后的代码 #

HTML结构（修正层级）

<main>
  <div class="parent-container">
    <div class="alignment-container">
      <div class="content"></div>
    </div>
    <div class="alignment-container">
      <div class="content"></div>
    </div>
    <div class="alignment-container">
      <div class="content"></div>
    </div>
    <div class="alignment-container">
      <div class="content"></div>
    </div>
  </div>
</main>

CSS（解决空白+居中问题）

.parent-container {
  width: 800px;
  height: 400px;
  border: solid 1px black;
  margin: 0 auto;
  font-size: 0; /* 消除inline-block元素间的空白 */
}

.alignment-container {
  box-sizing: border-box;
  width: 25%;
  height: 100%;
  border: solid 1px black;
  display: inline-block;
  margin: 0;
  font-size: 16px; /* 恢复子容器的字体大小 */
  /* 用基础方法实现content居中（无需Flex/Grid） */
  position: relative;
}

.content {
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  border: solid 1px black;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; /* 利用margin:auto实现绝对定位元素的居中 */
}

内容的提问来源于stack exchange，提问作者JustAJaspering