Question

这是此问题的后续跟进：Autofit text under image with only css

为什么此代码中的内联块div会在元素的右侧产生额外的宽度？

＆＃13;

.item {
  display: inline-block;
  background-color: red;
}

.image-container {
  background-color: blue;
  display: table;
  width: 1%;
}

img {
  height: 120px;
}

.text-wrapper {
  overflow: hidden;
}

＆＃13;

<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>

＆＃13;

编辑：这不是空格的问题，看到这个jsfiddle没有任何空格，并注意到div仍占用了大量的额外空间（红色区域）：https://jsfiddle.net/2Lzo9vfc/332/

Edit2：澄清我的要求：我有N个不同宽度的图像，我希望在＆＃34;动态表＆＃34;中布局，即图像应该是内联的，这样它们会在水平用完时自动换行父母的空间。这有点棘手的是我有一些文本，我希望在每个图像下显示，也应该用图像宽度包装（正如我所说，图像宽度可能会有所不同）。

Answer 1

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

.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>

我还不知道如何让元素缩小到尽可能小的宽度，同时仍然包含所有子元素。

Answer 2

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

这是我从他的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。

Answer 3

您在inline-block元素之间添加了空格。您可以通过删除元素之间的所有空格来删除这些项之间的水平空间。 e.g：

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

请注意，结束标记后面紧跟着下一个开始标记。

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

3 个答案: