Padding破坏响应式双栏布局，仅移动端需堆叠的问题求助

问题核心原因 #

1. 混用Flex与float：Flex布局下float属性完全失效，属于冗余代码，还会干扰布局逻辑
2. 盒子模型默认行为：默认width仅计算内容宽度，添加padding后元素总宽度=内容宽+padding，超出父容器后要么触发横向滚动，要么提前换行
3. 硬编码百分比宽度：手动设置的47.9%/47.89%不够灵活，且无法适配padding带来的宽度变化

完整修复方案 #

1. 统一盒子模型 #

给所有元素设置box-sizing: border-box，让width自动包含padding与边框，彻底解决溢出问题。

2. 简化Flex布局逻辑 #

移除冗余的float属性，用Flex原生的flex属性与gap管理栏宽和间距，无需手动计算百分比。

3. 修正HTML标签错误 #

将错误的<container>标签改为标准的<div>，避免浏览器解析异常。

修复后的代码 #

CSS代码

/* 全局统一盒子模型，清除默认边距 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

.videowrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  width: 100%;
  margin: auto;
}

iframe {
  position: absolute;
  inset: 0; /* 替代left/top/right/bottom:0，写法更简洁 */
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
}

.flex-wrapper {
  display: flex;
  gap: 20px; /* 两栏之间的间距，替代margin更稳定 */
  padding: 0 20px; /* 整体左右留白，避免内容贴边 */
}

.leftcontent {
  background: #074987;
  flex: 1; /* 让两栏自动平分可用空间 */
  padding: 20px;
}

.rightcontent {
  background: #FF3701;
  flex: 1;
  padding: 20px;
}

.blocktitle {
  color: white;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 54pt;
}

.blocktext {
  color: white;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  text-align: center; /* 文本居中提升可读性 */
}

/* 响应式断点调整 */
@media screen and (max-width: 800px) {
  .flex-wrapper {
    flex-direction: column; /* 切换为竖排堆叠 */
    gap: 10px; /* 移动端间距适当缩小 */
  }
}

HTML代码

<section class="video-container">
  <div class="videowrapper">
    <iframe src="https://www.youtube.com/embed/uJU58VAJDpE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
  </div>
</section>
<section class="container">
  <div class="flex-wrapper">
    <div class="leftcontent">
      <div class="blocktitle">
        Who We Are
      </div>
    </div>
    <div class="rightcontent">
      <div class="blocktext">
        Family, service, community and friendship. These are words that are rarely used to describe today’s “Big Box” retail outlets. Somewhere far away from here, it was decided that shopping for building materials meant wandering through an enormous warehouse
        with little to no direction. This meant receiving minimal support from the clerks, loading your own lumber, and seeing no friendly and familiar faces. Our response to that is simple – “That’s not the way we do business.”
      </div>
    </div>
  </div>
</section>

关键优化点说明 #

• box-sizing: border-box：从根源解决padding导致的宽度溢出问题，所有元素的宽度计算自动包含内边距
• flex: 1：让两栏自适应平分父容器空间，无需手动计算百分比，布局更稳定
• gap：Flex容器专用的间距属性，避免外边距折叠问题，比margin更直观可控
• 移除float：Flex布局下float完全无效，清理后代码更简洁

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