CSS：不使用float实现两div同行排列的异常问题

这问题我太熟了！你遇到的是inline-block元素的经典坑——空白字符占位，我来给你拆解原因和解决方案：

问题根源 #

当你把div设置为display: inline-block时，浏览器会把HTML代码中div之间的换行、空格这些空白字符解析成一个普通的空格（默认占约4-5px宽度）。你给每个div设50%宽度，两个加起来是100%，再加上这个空格的宽度，总宽度就超过了父容器（body）的100%宽度，所以第二个div只能被迫换行；而设49%时，两个div加空格的总宽度小于100%，能并排，但中间的空格会让它们看起来排列不齐。

几种靠谱的解决方案 #

• 方案一：干掉HTML里的空白字符
  把div标签挨在一起写，或者用注释把空白“吃掉”，这样就不会有空格占位了：

  <!-- 直接写在一行 -->
  <div>Red</div><div>Green</div>
  <div>Blue</div><div>Yellow</div>
  
  <!-- 用注释消除换行空白 -->
  <div>Red</div><!--
  --><div>Green</div>
  <div>Blue</div><!--
  --><div>Yellow</div>
  

• 方案二：父元素设font-size: 0
  空白字符的宽度由父元素的字体大小决定，给body设置font-size: 0就能把空格的宽度清零，然后记得给div单独重置字体大小，避免文字消失：

  body { 
    margin: 0; 
    padding: 0; 
    font-size: 0; /* 消除空白字符的宽度 */
  }
  div { 
    min-height: 50vh; 
    width: 50%; 
    display: inline-block; 
    font-size: 16px; /* 重置回正常字体大小 */
  }
  

• 方案三：用Flexbox布局（强烈推荐）
  既然你想避免float，Flexbox是现代布局的最优解，完全不用操心空白字符的问题，代码还更简洁：

  body { 
    margin: 0; 
    padding: 0; 
    display: flex;
    flex-wrap: wrap; /* 让超出的元素自动换行 */
  }
  div { 
    min-height: 50vh; 
    width: 50%; 
  }
  

  这种方式不管HTML里有没有换行空格，都能完美实现两列排列，后续要调整布局（比如对齐方式、间距）也更灵活。

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