CSS布局：总宽100%的块元素无法并排反而换行的问题排查

两个宽度合计100%的元素出现换行掉落，是三个问题叠加导致的：

• 盒模型计算逻辑错误：浏览器默认使用content-box盒模型，元素的实际占位宽度 = 设定的width值 + 左右内边距 + 左右边框 + 左右外边距。你给图片设置了左右各16px的外边距，这32px是在35%宽度之外额外占位的，最终图片总占位宽度超过35%，和65%宽度的文本块相加后总宽度超出父容器容量，自然触发换行。
• 默认布局规则限制：<div>属于块级元素，默认布局规则下块级元素会独占一行，就算两个元素宽度总和小于父容器宽度，不修改布局模式也不会自动并排显示。
• 选择器可能不匹配：你写的图片样式选择器是.section2-right img，但给出的HTML片段里图片的直接父容器class为s2-r1，如果该父容器不在.section2-right元素内部，你写的图片宽度、外边距样式根本不会生效，图片会按原始尺寸渲染，必然挤占空间导致文本换行。

方案1：Flex布局（优先推荐，维护成本最低） #

Flex布局不需要手动计算边距挤占的宽度，适配性更强：

1. 给图文的共同父容器设置flex布局，统一控制间距
2. 修正选择器匹配你的HTML结构
3. 删掉图片上额外加的左右边距，用父容器的gap属性控制元素间距
   对应代码如下：

/* 全局统一盒模型，从根源减少宽度计算错误，建议所有项目都加 */
* {
  box-sizing: border-box;
}
.s2-r1 {
  display: flex;
  gap: 32px; /* 控制图片和文本的间距，替代原img的margin */
  align-items: flex-start; /* 让图片和文本顶部对齐，避免默认拉伸 */
  margin: 16px 0; /* 如需上下外边距，加在父容器上即可 */
}
.s2-r1 img {
  width: 35%;
  height: auto;
}
.r-content {
  flex: 1; /* 自动占满父容器剩余宽度，不用手动写65%，适配更灵活 */
}

方案2：浮动布局（适配极低版本浏览器场景使用） #

如果需要兼容IE10及更早版本的浏览器，可以用浮动方案，手动计算边距占用的宽度：

* {
  box-sizing: border-box;
}
/* 清除浮动，避免父容器高度塌陷 */
.s2-r1::after {
  content: "";
  display: block;
  clear: both;
}
.s2-r1 img {
  float: left;
  /* 总占位35% = 内容宽度 + 左右32px margin，所以宽度用calc减去边距 */
  width: calc(35% - 32px);
  height: auto;
  margin: 16px;
}
.r-content {
  float: left;
  width: 65%;
}

注意：box-sizing: border-box只会把内边距、边框算入设定的width值，外边距始终是在元素外侧占位，不会被width包含，只要给元素加了外边距，计算总占位时一定要把外边距的尺寸算进去。

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