如何实现窄屏时两个div上下堆叠、宽屏时保留二者中间空白间隔？

API 探路者

2026-9-25

方案1：Flex布局（优先推荐）

无需修改DOM结构，利用flex自动分配剩余空间的特性实现原生间隔，配合媒体查询实现响应式堆叠，是当前主流的实现方案。

<div class="layout-container">
    <div class="item-a">A</div>
    <div class="item-b">B</div>
</div>

<style>
.layout-container {
    display: flex;
    justify-content: space-between;
}
.item-a {
    width: 10%;
}
.item-b {
    width: 80%;
}
/* 窄屏断点可根据业务需求自定义调整 */
@media (max-width: 768px) {
    .layout-container {
        flex-direction: column;
        gap: 12px; /* 堆叠后A、B的上下间距，按需修改 */
    }
    .item-a, .item-b {
        width: 100%;
    }
}
</style>

优势：

宽屏状态下两个元素宽度总和为90%，剩余10%自动作为中间间隔，无需额外添加空白占位元素
窄屏时直接切换为垂直排列，A自动出现在B上方，没有多余空白块
不存在浮动布局的高度塌陷等历史遗留问题，维护成本低

方案2：Float兼容方案

如果需要兼容IE9及以下不支持flex的旧浏览器，可以在原有浮动逻辑的基础上仅通过媒体查询覆盖窄屏样式实现需求：

<div class="layout-container">
    <div class="item-a">A</div>
    <div class="item-b">B</div>
    <!-- 清除浮动避免父容器高度塌陷 -->
    <div style="clear: both;"></div>
</div>

<style>
.item-a {
    float: left;
    width: 10%;
}
.item-b {
    float: right;
    width: 80%;
}
@media (max-width: 768px) {
    .item-a, .item-b {
        float: left;
        width: 100%;
        margin-bottom: 12px; /* 堆叠后上下间距，按需修改 */
    }
}
</style>

优势：