不使用Flex如何让3个响应式div均匀间距且不换行？

问题根源：float布局中，margin属于元素外部间距，不会被box-sizing: border-box纳入宽度计算。3个占比33.33%的列加上margin后，总宽度会超过容器的100%，导致第三列被迫换行。以下是三种可行的解决方法：

方案1：calc计算宽度 + 父容器负margin抵消 #

适配现有float布局，无需大幅修改代码：

1. 给父容器.row添加左右负margin，抵消列的margin带来的容器内边距影响：

.row{
    width: 100%;
    margin: 0 -10px; /* 左右各-10px，对应列的左右margin值 */
}

2. 修改媒体查询中的列宽度，用calc减去margin的总宽度：

/**For Large Devices**/
@media (min-width: 992px) {
    .col-lg-4{
        float: left;
        width: calc(33.33% - 20px); /* 减去左右各10px的margin */
        margin: 0 10px; /* 列之间的左右间距 */
    }
}

/*for medium devices*/
@media(min-width:768px) and (max-width:  991px){
    .col-md-6, .col-md-12{
        float: left;
    }
    .col-md-6{
        width: calc(50% - 20px); /* 减去左右各10px的margin */
        margin: 0 10px;
    }
    .col-md-12{
        width: calc(100% - 20px);
        margin: 0 10px;
    }
}

3. 保留.section的margin-top:20px，维持上下间距。

方案2：用padding代替margin（更简洁） #

利用box-sizing: border-box将padding纳入宽度计算的特性，用列的padding替代margin：

1. 修改媒体查询中的列样式，添加左右padding：

/**For Large Devices**/
@media (min-width: 992px) {
    .col-lg-4{
        float: left;
        width: 33.33%;
        padding: 0 10px; /* 左右padding替代margin */
    }
}

/*for medium devices*/
@media(min-width:768px) and (max-width:  991px){
    .col-md-6, .col-md-12{
        float: left;
    }
    .col-md-6{
        width: 50%;
        padding: 0 10px;
    }
    .col-md-12{
        width: 100%;
        padding: 0 10px;
    }
}

2. 调整.section的margin，只保留上下间距：

.section{
    background-color: grey;
    margin: 20px 0; /* 上下20px间距，左右无margin */
    border: 1px solid black;
}

方案3：改用Flexbox布局（推荐，现代布局方式） #

Flexbox天生支持间距控制，无需手动计算宽度，维护成本更低：

1. 将.row设置为flex容器：

.row{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 直接设置列之间的间距，上下左右均生效 */
}

2. 简化媒体查询中的列样式，用flex-basis设置宽度：

/**For Large Devices**/
@media (min-width: 992px) {
    .col-lg-4{
        flex: 1 0 calc(33.33% - (20px * 2)/3); /* 自动分摊gap宽度，保证总占比100% */
    }
}

/*for medium devices*/
@media(min-width:768px) and (max-width:  991px){
    .col-md-6{
        flex: 1 0 calc(50% - 10px); /* 分摊gap宽度 */
    }
    .col-md-12{
        flex-basis: 100%;
    }
}

3. 可移除.section的margin-top，gap已控制上下间距；若需额外上下间距，调整.row的padding即可。

内容的提问来源于stack exchange，提问作者Syed Mohummad Ali