HTML/CSS等高盒子实现问题：基于12栅格响应式布局需求

我用HTML和CSS制作了一个菜单页面，页面中有3个盒子，希望所有盒子高度一致，但不能使用Flexbox，因为必须遵循以下响应式规则：

• 屏幕宽度大于992px时，3个盒子各占33.33%宽度
• 屏幕宽度在768px-991px之间时，前两个盒子各占50%宽度，第三个盒子占全屏宽度
• 屏幕宽度小于767px时，每个盒子占100%宽度

当前使用的CSS代码：

/* Base style */
* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  font-family: fantasy, sans-serif;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 40px;
}

.container {
  position: relative;
  margin: 15px;
}

.row {
  width: 100%;
}

section > div {
  position: relative;
  top: 0px;
  border: 2px solid black;
  background-color: rgb(250, 255, 190);
  margin: 15px;
  padding: 10px;
}

div > p {
  text-align: justify;
  margin-top: 50px;
  font-size: 100%;
}

label {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
  text-align: center;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

h3 {
  margin: 15px 0px 15px 0px;
}

#title-1 {
  background-color: #9f7b59;
  color: #fff0dc;
}

#title-2 {
  background-color: #a76e69;
}

#title-3 {
  background-color: #0c1b44;
  color: #8e8c6a;
}
/* Desktop */
@media (min-width: 992px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

对应的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    <title>Coursera Module 2 Assignment</title>
  </head>
  <body>
    <header>
      <h1>Menu!</h1>
    </header>
    <main>
      <div class="container">
        <div class="row">
          <section class="col-lg-4 col-md-6 col-sm-12">
            <div>
              <label id="title-1"><h3>Chicken</h3></label>
              <p>
                Chicken is the most common type of poultry in the world. Owing
                to the relative ease and low cost of raising chickens in
                comparison to mammals such as cattle or hogs chicken meat and
                chicken eggs have become prevalent in numerous cuisines.
              </p>
            </div>
          </section>
          <section class="col-lg-4 col-md-6 col-sm-12">
            <div>
              <label id="title-2"><h3>Beef</h3></label>
              <p>
                Beef is the culinary name for meat from cattle. In prehistoric
                times, humankind hunted aurochs and later domesticated them.
                Since that time, numerous breeds of cattle have been bred
                specifically for the quality or quantity of their meat.
              </p>
            </div>
          </section>
          <section class="col-lg-4 col-md-12 col-sm-12">
            <div>
              <label id="title-3"><h3>Sushi</h3></label>
              <p>
                Sushi is a Japanese dish of prepared vinegared rice, usually
                with some sugar and salt, accompanied by a variety of
                ingredients, such as seafood often raw and vegetables. Styles of
                sushi and its presentation vary widely, but the one key
                ingredient is "sushi rice", also referred to as shari, or
                sumeshi.
              </p>
            </div>
          </section>
        </div>
      </div>
    </main>
  </body>
</html>

下面提供两种无需Flexbox的等高实现方案，均能兼容你的响应式布局规则：

方法1：表格布局法 #

表格布局天生支持等高列，只需调整.row和section的显示属性，同时适配不同屏幕的布局：

修改后的核心CSS代码 #

/* 基础样式调整 */
.row {
  width: 100%;
  display: table;
  border-collapse: separate;
  border-spacing: 15px; /* 替代原来盒子的margin，保证间距一致 */
}
section {
  display: table-cell;
}
section > div {
  margin: 0; /* 移除原来的margin，避免重复间距 */
  height: 100%; /* 让内部容器填满table-cell的高度 */
}

/* 平板布局适配 */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-12 {
    display: table-row; /* 让第三个盒子单独占一行 */
  }
  .col-md-12 > div {
    display: table-cell;
    width: 100%;
  }
}

/* 移动端布局适配 */
@media (max-width: 767px) {
  section {
    display: block; /* 恢复块级元素，垂直排列 */
    margin-bottom: 15px; /* 保持盒子间距 */
  }
  .row {
    border-spacing: 0; /* 移除table的间距 */
  }
}

方法2：负边距+溢出隐藏法 #

这个方法利用超大的padding-bottom和对应的负margin-bottom，配合父元素的overflow:hidden来强制所有浮动元素等高，适合原有的浮动布局：

修改后的核心CSS代码 #

/* 基础样式调整 */
.row {
  width: 100%;
  overflow: hidden; /* 裁剪多余的padding部分 */
}
section {
  float: left;
  margin: 15px; /* 把原来盒子的margin移到section上 */
  margin-bottom: -9999px; /* 负边距抵消padding */
  padding-bottom: 9999px; /* 超大padding拉伸容器高度 */
}
section > div {
  margin: 0; /* 移除原来的margin */
  height: 100%; /* 让内部容器填满section高度 */
}

这个方法不需要额外修改媒体查询，原有的宽度类已经能控制不同屏幕下的布局，所有同行的盒子会自动拉伸到最高盒子的高度。

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