响应式三DIV布局问题：添加边距后布局错乱求解决方案

问题描述 #

需要实现适配多设备的单页响应式布局，具体要求：

• 桌面（≥992px）：三个区块平分屏幕；
• 平板（768px-991px）：前两个区块各占50%宽度，第三个独占一行；
• 移动端（≤767px）：每个区块独占一行。

给区块添加边距后布局错乱，尝试过display: flex但仅桌面视图生效，其他视图布局混乱。

问题根源 #

原代码使用float布局，同时给.sec设置固定左右边距和width: fit-content，导致区块总宽度超出容器，破坏响应式比例；另外float布局本身在处理边距和比例时容易出现换行错乱。

修复方案：改用Flex布局（可靠的响应式实现） #

Flex布局天生适合响应式场景，能轻松处理间距和比例分配，调整容器和子元素属性即可解决问题。

1. 修正HTML结构（移除多余闭合标签） #

原HTML存在多余的</div>标签，先修正：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Menu</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="menu"><h1>Our Menu</h1></div>
    
    <div class="row">
        <div class="sec col-lg-4 col-md-6 col-sm-12">  
            <div class="title chicken">Chicken</div>
         <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
         Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
        </section> 
        </div>
   
        <div class="sec col-lg-4 col-md-6 col-sm-12">  
            <div class="title beef">Beef</div>
         <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
         Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
        </section> 
        </div>

        <div class="sec col-lg-4 col-md-12 col-sm-12"> 
            <div class="title sushi">Sushi</div>
         <section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia rem ratione pariatur, sunt, possimus amet, delectus doloremque corrupti alias quae! Qui deleniti dicta rerum repudiandae, eligendi incidunt labore natus.
         Nulla delectus labore architecto suscipit repudiandae deleniti, consectetur debitis quos obcaecati fugiat ipsam at earum dolore provident corrupti, aperiam sequi eos ratione qui perspiciatis modi eligendi nostrum totam alias. Tempore?
        </section> 
        </div>
    </div>
   
</body>
</html>

2. 重写CSS（Flex布局实现响应式+边距） #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu {
    padding: 50px;
}

.menu h1 {
    text-align: center;
}

/* Flex容器核心设置 */
.row {
    width: 100%;
    padding: 0 10px; /* 容器左右留边，避免区块贴屏幕边缘 */
    display: flex;
    flex-wrap: wrap; /* 空间不足时自动换行 */
    gap: 20px; /* 区块间的统一间距，替代margin更可靠 */
}

.sec {
    border: 1px solid black;
    background-color: rgba(223, 175, 140, 0.267);
    position: relative;
    /* 移除原有的margin和width: fit-content */
}

.title {
    padding-bottom: 10px;
    border: 1px solid black;
    width: 120px;
    height: 30px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute; /* 改用绝对定位，不影响内部内容布局 */
    top: 0;
    right: 0;
}

.chicken { background-color: red; }
.beef { background-color: pink; }
.sushi { background-color: purple; }

section {
    padding: 35px 20px 2px 20px;  
}

/* 响应式断点配置 */
@media (min-width: 992px) {
    .col-lg-4 {
        flex: 1 1 calc(33.333% - 20px); /* 平分宽度，减去gap的影响 */
        max-width: calc(33.333% - 20px);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6 {
        flex: 1 1 calc(50% - 20px); /* 占50%宽度，减去gap */
        max-width: calc(50% - 20px);
    }
    .col-md-12 {
        flex: 1 1 100%; /* 独占一行 */
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .col-sm-12 {
        flex: 1 1 100%; /* 独占一行 */
        max-width: 100%;
    }
}

关键改进说明 #

• 用display: flex替代float布局，解决边距导致的宽度溢出和换行问题；
• gap属性统一设置区块间距，避免外边距折叠，比margin更直观；
• 子元素通过flex: 1 1 [计算宽度]确保在不同断点下的比例正确，calc()用来减去间距宽度；
• 将.title改为绝对定位，避免浮动影响内部内容的排版；
• 修正原HTML结构错误，避免布局异常。

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