不使用flexbox与CSS Grid实现嵌套列布局的问题咨询

核心问题 #

布局错乱的根源是默认盒模型规则：默认box-sizing为content-box，此时列的总宽度 = 设定的width值 + 内边距 + 边框，只要你给.col-6加了内边距或边框，总宽度就会超过50%，导致列被挤到下一行。另外你提供的示例代码里最后一个col-6的属性引号存在转义错误，实际编写时要修正为正常双引号。

修复后可直接使用的代码 #

CSS部分 #

/* 全局统一盒模型，宽度计算包含内边距、边框，不会撑宽元素 */
* {
  box-sizing: border-box;
}
/* 清除浮动的固定写法不变 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-6 {
  float: left;
  width: 50%;
  /* 按需添加列间距，不会破坏布局 */
  padding: 0 12px;
}

HTML部分 #

<div class="row">
  <div class="col-6">
    外层左侧列
    <div class="row">
      <div class="col-6">内层左侧列</div>
      <div class="col-6">内层右侧列</div>
    </div>
  </div>
  <div class="col-6">
    外层右侧列
    <div class="row">
      <div class="col-6">内层左侧列</div>
      <div class="col-6">内层右侧列</div>
    </div>
  </div>
</div>

注意事项 #

• 空列建议加min-height属性，避免高度塌陷导致的排版错位
• 所有列的直接父容器必须加row类，确保浮动被正确清除，不会影响外层其他元素的排版
• 如果需要自定义列边框，直接添加即可，border-box规则下不会撑宽元素

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