非Flex/Grid/Bootstrap的三栏响应式布局移动端居中问题求助

需求说明 #

• 屏幕宽度≤992px：3个盒子在页面居中且均匀分布
• 平板视图（768px≤宽度≤991px）：前2个区块占首行等宽，第3个区块单独占整行
• 移动端（宽度≤767px）：每个区块单独占整行且居中

原代码问题分析 #

1. 缺少移动端媒体查询规则：未针对≤767px的屏幕编写布局逻辑，导致移动端仍沿用浮动三栏布局
2. 浮动容器清除方式错误：.row的clear: both无法正确清除浮动，会导致容器高度塌陷，也未设置居中容器包裹浮动元素
3. 浮动元素无法直接居中：浮动元素默认靠左排列，移动端未取消浮动，无法实现区块居中

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three Column Design</title>
<style>
* {
  box-sizing: border-box;
}

#k1 {
    background-color: blueviolet;
}
#k2 {
    background-color: rgb(58, 245, 98);
}
#k3 {
    background-color: rgb(179, 38, 38);
}

/* 容器设置：居中包裹浮动元素，用伪元素清除浮动 */
.row {
  max-width: 1200px;
  margin: 0 auto;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 31%;
  border: 2px solid black;
  margin: 1%;
}

.baslik1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: palevioletred;
    border: 1px solid black;
    padding: 5px 20px;
    float: right;
}
.baslik2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: red;
    border: 1px solid black;
    padding: 5px 20px;
    float: right;
}
.baslik3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    background-color: rgb(217, 243, 166);
    border: 1px solid black;
    padding: 5px 20px;
    float: right;
}

p {
    clear: both;
    padding: 10px;
}

/* 平板视图：768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
  .column:nth-child(1),
  .column:nth-child(2) {
    width: 48%;
    margin: 1%;
  }
  .column:nth-child(3) {
    width: 98%;
    margin: 1% auto;
    float: none;
  }
}

/* 移动端：≤767px */
@media only screen and (max-width: 767px) {
  .column {
    float: none;
    width: 98%;
    margin: 1% auto;
  }
}
</style>
</head>
<body>
<h1>Three Column Design</h1>

<div class="row">
    <div id="k1" class="column">
        <div class="baslik1">Chicken</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
    </div>
    <div id="k2" class="column">
        <div class="baslik2">Beef</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
    </div>
    <div id="k3" class="column">
        <div class="baslik3">Sushi</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
    </div>
  </div>
</body>
</html>

关键修改说明 #

1. 浮动容器优化：给.row添加max-width: 1200px; margin: 0 auto;让整体布局在大屏幕居中，同时用::after伪元素清除浮动，解决容器高度塌陷问题
2. 统一间距设置：把.column的margin从固定15px改为百分比1%，让间距随屏幕宽度自适应，避免溢出
3. 平板视图优化：用:nth-child选择器代替ID选择器减少冗余代码，第三栏取消浮动并设置margin: 1% auto实现居中
4. 移动端布局：取消.column的浮动，设置width: 98%并通过margin: 1% auto实现区块居中，同时每个区块独占一行

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