不使用Flex-box与Grid实现指定布局的技术问询及问题排查

问题说明 #

需使用传统技术（禁止Flexbox/Grid）实现以下布局：

• 1/3宽度元素在同一行排列
• 1/2宽度元素在同一行排列
• 1/4宽度元素在同一行排列
• 元素间存在间隙，效果与预期一致

原代码未达预期的核心原因：inline-block元素间的空白字符会占用宽度，同时宽度计算、margin设置未匹配间隙需求。

修复后的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Assignment 1</title>
  </head>

  <body>
    <div class="parent">
      <div class="col full">Full width</div>

      <div class="col third">1/3</div><!--
      --><div class="col third">1/3</div><!--
      --><div class="col third">1/3</div>

      <div class="col half">1/2</div><!--
      --><div class="col half">1/2</div>

      <div class="col quarter">1/4</div><!--
      --><div class="col quarter">1/4</div><!--
      --><div class="col quarter">1/4</div><!--
      --><div class="col quarter">1/4</div>
    </div>
  </body>
</html>

CSS代码 #

.parent {
  width: 800px;
  background-color: rgb(133, 129, 124);
  /* 消除inline-block元素间的空白间隙 */
  font-size: 0;
}

.col {
  padding: 15px;
  background-color: #eee;
  text-align: center;
  margin: 15px 0;
  /* 恢复子元素字体大小 */
  font-size: 16px;
  box-sizing: border-box; /* 让padding包含在元素宽度内，避免宽度溢出 */
}

.col.full {
  width: 100%;
}

.col.third {
  display: inline-block;
  width: calc((100% - 30px) / 3);
  margin-right: 15px;
}
/* 移除最后一个元素的右侧margin，避免整体宽度溢出 */
.col.third:last-child {
  margin-right: 0;
}

.col.half {
  display: inline-block;
  width: calc((100% - 15px) / 2);
  margin-right: 15px;
}
.col.half:last-child {
  margin-right: 0;
}

.col.quarter {
  display: inline-block;
  width: calc((100% - 45px) / 4);
  margin-right: 15px;
}
.col.quarter:last-child {
  margin-right: 0;
}

核心修复点 #

1. 消除inline-block空白间隙：通过HTML注释移除元素间的换行/空格，或给父容器设置font-size: 0（需恢复子元素字体大小）
2. 修正盒模型：添加box-sizing: border-box，确保padding不会额外增加元素宽度
3. 调整间隙计算：用右侧margin实现元素间间隙，最后一个元素移除右侧margin，宽度计算公式改为(总宽度 - 间隙总数×单间隙大小) ÷ 元素数量

疑问解答 #

1. 同名类或父类继承，哪种是最佳实践？ #

• 通用类+专属类组合：比如用col作为通用样式类，third/half作为宽度专属类，这种方式灵活性强，元素可组合多个类实现不同样式，是前端工程中的常用方案（类似Bootstrap栅格系统）
• 父类继承：仅适合一组元素样式高度统一、且仅在特定父容器内生效的场景，扩展性较弱，元素复用样式时不够方便
• 最佳实践是通用类+语义化专属类结合，既保证样式复用，又能明确元素的布局角色

2. 布局中通常是否使用inline-block？ #

• 在Flexbox/Grid普及前，inline-block是实现横向布局的常用方案之一，相比浮动（float），它不会导致容器高度塌陷，还能保留元素的文本对齐特性
• 但inline-block存在空白间隙、垂直对齐等问题，现代布局中优先选择Flexbox/Grid；若必须用传统技术，inline-block是比浮动更友好的选择，适合简单横向排列场景

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