为什么布局中三个设置33.3%宽度的div无法排在同一行？

问题原因 #

• inline-block元素间的空白符占用宽度：你编写HTML时三个.box标签之间存在换行和空格，浏览器会将这些连续空白渲染为1个空格字符，三个元素之间共2个空格的宽度叠加到总宽度后，超出了父容器100%的宽度上限，触发换行。
• 默认盒模型导致实际宽度超出设置值：CSS默认box-sizing为content-box，你给.box设置的width: 33.3%仅指代内容区宽度，左右各1px的边框是额外叠加在宽度之外的，单个.box的实际总宽度为33.3% + 2px，三个叠加后总宽度必然超过父容器的100%宽度。

解决方案 #

方案1：修复inline-block布局问题

1. 消除空白符影响，二选一即可：
   • 把HTML中三个.box标签写在同一行，中间不要留空格/换行：

   <div class="parent">
     <div class="box">1</div><div class="box">2</div><div class="box">3</div>
   </div>
   

   • 给父元素设置font-size: 0，让空白符不占宽度，再给.box单独设置字体大小恢复文字显示：

   .parent {
     width: 100%;
     border:1px solid blue;
     font-size: 0; /* 消除空白符宽度 */
   }
   .box {
     width: 33.3%;
     border: 1px solid red;
     display: inline-block;
     font-size: 16px; /* 恢复正常文字大小 */
   }
   

2. 统一盒模型，避免边框额外占宽：
   增加全局样式把盒模型改为border-box，此时边框、内边距都会被包含在设置的宽度内：

   * {
     box-sizing: border-box;
   }
   

方案2：改用flex布局（更简便，无需处理上述两个问题）

直接修改父容器样式使用flex布局，子元素设置flex: 1即可自动平分父容器宽度：

.parent {
  width: 100%;
  border:1px solid blue;
  display: flex;
}
.box {
  flex: 1;
  border: 1px solid red;
}

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