为什么这些内联块元素会产生额外的宽度？

Question

这是对于这个问题的跟进： 只使用CSS自动调整图像下面的文本 为什么在这段代码中，inline-block div元素会在元素右侧产生额外的宽度？

.item {
  display: inline-block;
  background-color: red;
}

.image-container {
  background-color: blue;
  display: table;
  width: 1%;
}

img {
  height: 120px;
}

.text-wrapper {
  overflow: hidden;
}

<div class="item">
  <div class='image-container'>
    <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
    <div class='text-wrapper'>
      <p class='text'>Some text that may need to wrap into multiple lines</p>
    </div>
  </div>
</div>

<div class="item">
  <div class='image-container'>
    <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
    <div class='text-wrapper'>
      <p class='text'>Some text that may need to wrap into multiple lines</p>
    </div>
  </div>
</div>

<div class="item">
  <div class='image-container'>
    <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
    <div class='text-wrapper'>
      <p class='text'>Some text that may need to wrap into multiple lines</p>
    </div>
  </div>
</div>

<div class="item">
  <div class='image-container'>
    <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
    <div class='text-wrapper'>
      <p class='text'>Some text that may need to wrap into multiple lines</p>
    </div>
  </div>
</div>

编辑：这不是空格问题，请参见此jsfiddle（没有任何空格），请注意div仍然占用大量额外空间（红色区域）：https://jsfiddle.net/2Lzo9vfc/332/

编辑2：为了澄清我的要求：我有N个具有不同宽度的图像，希望在“动态表格”中进行布局，即图像应该是内联的，因此当宽度超过父级水平空间时，它们将自动换行。 这变得棘手的地方是我有一些文本希望显示在每个图像下面，该文本也应随着图像宽度进行换行（正如我所说，图像宽度可能会不同）。

- monoceres

---

如果您没有将display:table应用于容器，那就是容器的宽度。这是文本通常占据的空间。 - j08691

你为什么要使用 display:table？ - Martin

@j08691 是的，我也发现了，但这不是非常错误的行为吗？ - monoceres

@Michael_B OP在谈论红色空间。对我来说似乎不是重复的。Chrome和Firefox都会给inline-block div一个在300px范围内的宽度。 - starlocke

问题在于，由于项目不再是inline-block，而是table-cell，当父元素宽度达到时，它不会自动流入下一行。 - monoceres

Answer 1

我修改了@Brandon Gano的第二个答案。我在.text-wrapper上使用了display: table-caption。

这是我从他的jsfiddle修改的CSS：

.text-wrapper {
  overflow: hidden;
  display: table-caption;
  caption-side: bottom;
  height: 60px;             /* You may have to modify the height */
  background-color: blue;
}

并且更新了jsfiddle。

- Anthony

---

现在只需将文本包装器的高度设置为自动，并保持对齐即可.. ;) 只是开个玩笑！非常感谢！ - monoceres

随时可以！很高兴能帮忙 :) - Anthony

Answer 2

该项的红色部分是浏览器无法正确调整容器大小的产物。在应用表格布局之前，它使用文本长度来确定宽度。如果您知道项目的宽度，可以使用这种更简单的方法：

.item {
  display: inline-block;
  background-color: blue;
  width: 120px;
}

.image {
  display: block;
  height: 120px;
}

<div class="item">
  <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
  <p class='text'>Some text that may need to wrap into multiple lines</p>
</div>

<div class="item">
  <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
  <p class='text'>Some text that may need to wrap into multiple lines</p>
</div>

<div class="item">
  <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
  <p class='text'>Some text that may need to wrap into multiple lines</p>
</div>

<div class="item">
  <img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
  <p class='text'>Some text that may need to wrap into multiple lines</p>
</div>

我不知道有什么方法可以使元素在包含所有子元素的同时缩小到最小可能的宽度。

- Brandon Gano

---

根据 OP 提供的另一篇帖子，他不知道图片的宽度，或者宽度可能会变化。 - j08691

好的，我知道了。我不习惯跟随兔子洞。如果那个信息很重要，它应该在问题中而不是在附加链接中。 - Brandon Gano

是的，我进行了另一个编辑以澄清我的要求。 - monoceres

我使用了变量文本，这证明是为什么 inline-block 的东西具有意外宽度的原因。https://jsfiddle.net/tewn7mjm/ - starlocke

接受这个答案，因为你解释了divs为什么有那个神奇的宽度。请参考@Anthony的答案，那是我想要的最佳工作示例！ - monoceres

Answer 3

您正在看到在inline-block元素之间添加的空格。您可以通过删除元素之间的所有空格来消除这些项目之间的水平空格。例如：

<div>
  ...
</div><div>
  ...
</div><div>
  ...
</div>

请注意，闭合标签紧接着下一个开放标签。

- Brandon Gano

---

我确实尝试过那个...但是不行。OP不是在谈论那个红色区域吗？ - starlocke

是的，我在谈论红色区域，所以这并不能解决它 :( - monoceres