两个div内联块,为什么它们不会彼此相邻？

Question

我已经创建了两个div,我希望它们彼此相邻,但即使它们有显示,一个也总是向下:内联块.怎么了？我不明白.

.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

问题

在不指定宽度的情况下,内联块的宽度由其内容自动确定.在您的情况下,红色块包含一个长行,这使得它(几乎)填充整个可用空间.蓝色块比红色块可用的空间宽,使其包裹到下一行.

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

在下面的代码段中,两个块都有一个宽度.您可以指定像素宽度,因为您也知道容器大小,但百分比也可以使用,只要它们加起来为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>

Answer 2

如果您的inline-block元素有足够的内容，它们将填充整个水平空间，将其他元素推到下方。解决此问题的一种方法是使用 flexbox。

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

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

Answer 3

该display:inline-block品牌元素都保持在同一直线上,如果有它的足够的空间.否则,该行将中断.

有许多解决方案可以在这里工作,但让我们更简单地思考......

如果您为容器和"b"div定义了固定宽度,那么为什么不将固定宽度设置为"a"div,180px剩余的？

.container {
  width: 200px;
  border: 1px solid black;
}
.a {
  width: 180px;
  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>