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以删除它们之间的空格。选择此解决方案时，这是一个常见的陷阱。

＆＃13;

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

＆＃13;

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

＆＃13;

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

或者，您可以使它们像表格行一样。这样做的好处是它们的高度也会匹配，并且你可以很容易地给它们一个宽度而另一个不宽。此外，在使用第一个解决方案时，您不会遇到需要解决的空白元素问题。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

display:inline-block使两个元素保持在同一行 ，如果有足够的空间 。否则，该线将会中断。

有很多解决方案可以在这里使用，但让我们更简单...

如果您已为容器和＆＃34; b＆＃34;定义了固定宽度。 div，那么为什么不设置一个固定的宽度到＆＃34; a＆＃34; div也是，剩下180px？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果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 4

因为div里面的文字是＆＃39; a＆＃39;相对于div大小来说，它取整个容器的宽度，通过给这个div一个固定的宽度小于固定的容器宽度或%，div将彼此相邻。

修改

＆＃13;
＆＃13;
.container { width: 200px; border: 1px solid black; } .a { display: inline-block; background: red; width:150px; } .b { width: 20px; display: inline-block; background: blue; vertical-align:top; }
＆＃13;
<div class="container"> <div class="a">hello hello hello hello hello hello hello</div> <div class="b">aaa</div> </div>
＆＃13;
＆＃13;
＆＃13;

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

4 个答案: