html - 两个 div 内联 block ，为什么它们不彼此相邻？

Question

我创建了两个 div，我希望它们彼此相邻，但即使它们有显示:inline-block，一个也总是在下降。怎么了？我不明白。

.container {
  width: 200px;
  border: 1px solid black;
}
.a {
  display: inline-block;
  background: red;
}
.b {
  width: 20px;
  display: inline-block;
  background: blue;
}

<div class="container">
  <div class="a">hello hello hello hello hello hello hello</div>
  <div class="b">aaa</div>
</div>

Answer 1

问题

如果不指定宽度，内联 block 的宽度由其内容自动确定。在您的例子中，红色 block 包含一条长线，这使得它(几乎)填满了整个可用空间。蓝色 block 比红色 block 留下的可用空间宽，导致它换行到下一行。

注意:在阅读我在 2015 年给出的建议之前，请注意我现在可能会尝试使用 flexbox 来完成它，如 in this answer by Steve Sanders .

解决方案 1:为两个元素指定宽度

在下面的代码片段中，两个 block 都指定了宽度。您可以指定像素宽度，因为您也知道容器的大小，但百分比也可以，只要它们加起来为 100%，而不是更多。

请注意，我还必须稍微修改 HTML 以删除它们之间的空白。这是选择此解决方案时的一个常见陷阱。

.container {
  width: 200px;
  border: 1px solid black;
}
.a {
  display: inline-block;
  width: 180px;
  background: red;
}
.b {
  display: inline-block;
  width: 20px;
  background: blue;
}

<div class="container">
  <div class="a">hello hello hello hello hello hello hello
  </div><div class="b">aaa</div>
</div>

解决方案 2:将元素显示为一行中的表格单元格

或者，您可以让它们表现得像表格行。这样做的好处是它们的高度也会匹配，并且您可以轻松地为其中一个指定宽度而另一个不指定宽度。此外，您不会遇到使用第一种解决方案时需要解决的元素间空白问题。

.container {
  width: 200px;
  border: 1px solid black;
  display: table;
}
.a {
  display: table-cell;
  background: red;
}
.b {
  width: 20px;
  display: table-cell;
  background: blue;
}

<div class="container">
  <div class="a">hello hello hello hello hello hello hello
  </div><div class="b">aaa</div>
</div>