如何实现三个带中间间距的并排div？现有代码问题求助

嘿，我来帮你搞定这个布局难题！你当前的代码用了float: left和33%宽度实现并排，但只要一加间距，第三个div就会因为总宽度超过100%掉下来——这绝对是百分比布局的经典坑。下面给你两种实用的解决方案，按需选择：

方案一：Flexbox（强烈推荐，现代布局首选） #

Flexbox是现在前端布局的主流方案，用它设置元素间距简直不要太省心，完全不用手动算宽度：

<style>
  .container {
    display: flex;
    gap: 15px; /* 这里直接设置你想要的间距大小，比如15px */
  }
  .box {
    flex: 1; /* 让三个div自动平分容器的可用空间 */
    background-color: red;
    text-align: center;
    color: #fff;
    padding: 10px; /* 可选，给内容加些内边距更美观 */
  }
</style>
<div class="container">
  <div class="box">Div 1</div>
  <div class="box">Div 2</div>
  <div class="box">Div 3</div>
</div>

• display: flex把父容器转为弹性容器，子元素会自动横向排列
• gap属性直接定义子元素之间的间距，不会影响元素的宽度计算，完全不用担心溢出
• flex: 1让三个div自动均分容器宽度，不管容器尺寸怎么变都能自适应

方案二：Float + Calc（兼容旧浏览器） #

如果需要兼容IE这类老旧浏览器，可以用calc()函数手动计算元素宽度，配合浮动实现布局：

<style>
  .container {
    margin: 0 -5px; /* 抵消子元素的左右margin，避免容器出现横向滚动条 */
  }
  .box {
    float: left;
    width: calc((100% - 20px) / 3); /* 总宽度减去两个间距的20px，再平分给三个元素 */
    margin: 0 5px; /* 左右各5px，两个div之间的间距就是10px */
    background-color: red;
    text-align: center;
    color: #fff;
    box-sizing: border-box; /* 确保padding和border不会额外增加元素宽度 */
  }
  /* 清除浮动，避免父容器高度塌陷 */
  .container::after {
    content: "";
    display: table;
    clear: both;
  }
</style>
<div class="container">
  <div class="box">Div 1</div>
  <div class="box">Div 2</div>
  <div class="box">Div 3</div>
</div>

• calc((100% - 20px)/3)：先把总宽度减去两个间距的总和（20px），再平分给三个元素，确保总宽度刚好填满容器
• box-sizing: border-box是关键，它能让元素的padding和border包含在设置的宽度内，避免布局混乱
• 父容器的负margin是为了抵消子元素的左右margin，防止容器出现横向滚动

为什么你的原代码会有问题？ #

你之前给每个div设置了33%的宽度，一旦给div加margin，三个元素的总宽度就会变成3*33% + 2*间距，肯定超过100%，导致第三个div被挤到下一行——这就是百分比布局中必须考虑的“盒模型”问题。

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