Html 有并没有办法让三个div分别占据一行的三分之一（使用宽度和内联块，而不是使用float）

我的代码如下：

html 我使用上面的代码，但它最终分成两行。我想知道它怎么了？

---

我知道我可以用float来做这个。但是上面的代码拖了我很长时间。希望有人能告诉我原因，提前谢谢。

删除div之间的间距，我会使用HTML注释来保持HTML的可读性

.wrapper>div{
宽度：33.33%；
显示：内联块；
高度：80px；
}
.首先{
背景：红色；
}
.第二{
背景：黄色；
}
.第三{
背景：蓝色；
}

这是因为标记中包含内联元素。删除换行符或遵循链接中的一个替换项。

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>

.wrapper > div {
  display: inline-block;
}
.wrapper .first {
  width: 33.3%;
}
.wrapper .second {
  width: 33.3%;
}
.wrapper .third {
  width: 33.3%;
}