如何让两个div并排并占满屏幕宽度？解决布局换行问题

嗨，你完全找对问题根源啦！确实是border和padding让每个.box的实际宽度超过了50%，才导致它们换行的。默认情况下CSS的盒模型是content-box——你设置的width:50%只算内容区域的宽度，再加上左右各2px的border和5px的padding，每个盒子的总宽度就变成了50% + 4px + 10px，两个加起来自然超出了屏幕宽度，只能换行。

这里有几个简单靠谱的解决方案，按推荐程度排序：

方案1：使用box-sizing: border-box（最推荐） #

这个属性能让元素的width包含内容区+padding+border，完美解决宽度溢出问题，也是现代CSS布局的标准做法。只需要给.box加上这一行：

<head>
  <style>
    .box {
      width: 50%;
      background-color: #202020;
      border: 2px solid #484848;
      border-radius: 10px;
      padding: 5px;
      margin-bottom: 5px;
      box-sizing: border-box; /* 关键属性，让width包含padding和border */
    }
    p {
      font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
      color: #fff;
      margin: 0px;
    }
  </style>
</head>
<body>
  <div class="box" style="float:left;">
    <p>Test</p>
  </div>
  <div class="box" style="float:right;">
    <p>Test</p>
  </div>
  <div style="clear:both;"></div> <!-- 别忘了清除浮动，避免父容器高度塌陷 -->
</body>

方案2：用calc()精确计算宽度 #

如果你不想修改盒模型，可以手动用calc()把padding和border的宽度从50%里减去。比如每个盒子左右border共4px，左右padding共10px，总共有14px需要扣除：

.box {
  width: calc(50% - 14px);
  /* 其他样式不变 */
}

不过这个方案不够灵活——以后如果修改border或padding的大小，你得重新计算数值，不如border-box省心。

方案3：改用Flex布局（现代布局首选） #

浮动是比较老旧的布局方式，现在更推荐用Flex布局，不仅不用处理浮动和清除浮动的问题，还能轻松实现各种排列需求：

<head>
  <style>
    .container {
      display: flex;
      gap: 5px; /* 可选，给两个盒子之间加间距 */
    }
    .box {
      flex: 1; /* 让两个盒子平分可用宽度 */
      background-color: #202020;
      border: 2px solid #484848;
      border-radius: 10px;
      padding: 5px;
      margin-bottom: 5px;
      box-sizing: border-box; /* 加上更保险，避免padding/border影响宽度 */
    }
    p {
      font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
      color: #fff;
      margin: 0px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <p>Test</p>
    </div>
    <div class="box">
      <p>Test</p>
    </div>
  </div>
</body>

Flex布局的优势很明显：代码更简洁，响应式表现更好，还能通过gap轻松设置盒子间距，不用再折腾margin的兼容性问题。

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