为什么这些内嵌块元素会产生额外的宽度？ [英] Why does these inline-block element produce extra width?

问题描述

这是此问题的后续处理：仅在图像下自动调整文本css

为什么这段代码中的inline-block div会在元素的右侧产生额外的宽度？

.item {display：inline-block; background-color：red;}。image-container {background-color：blue;显示：表格; 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'>可能需要包装成多行的一些文字< / 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'>可能需要包装成多行的一些文字< / 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'>可能需要包装成多行的一些文字< / 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'>可能需要包装成多行的一些文字< / p> < / DIV> < / div>< / div>  

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

Edit2：澄清我的要求：我有N张图片我希望在动态表格中进行布局的宽度，即图像应该内联，以便在父级中的水平空间用完时自动换行。这很棘手的是我有一些文字，我希望显示在每个图像下，应该与图像宽度包装（如我所说，图像宽度可能会有所不同）。

false>

  .item {display：inline-block;背景颜色：蓝色; width：120px;}。image {display：block; height：120px;}  

< div class =item > < img src ='http：//i.imgur.com/nV2qBpe.jpg'class =image> < p class ='text'>一些可能需要包装成多行的文字< / p>< / div>< div class =item> < img src ='http：//i.imgur.com/nV2qBpe.jpg'class =image> < p class ='text'>一些可能需要包装成多行的文字< / p>< / div>< div class =item> < img src ='http：//i.imgur.com/nV2qBpe.jpg'class =image> < p class ='text'>一些可能需要包装成多行的文字< / p>< / div>< div class =item> < img src ='http：//i.imgur.com/nV2qBpe.jpg'class =image> < p class ='text'>一些可能需要包装成多行的文本< / p>< / div>

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

This is a follow up from this question: Autofit text under image with only css

Why does the inline-block divs in this code produce extra width on the right side of the elements?

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

Edit: This is NOT a problem with whitespace, see this jsfiddle without any whitespace and notice that the div still takes up lots of extra space (the red area): https://jsfiddle.net/2Lzo9vfc/332/

Edit2: To clarify my requirements: I have N images with varying width that I wish to layout in a "dynamic table", i.e. the images should be inline so they will automatically wrap when running out of horizontal space in parent. Where this gets tricky is that I have some text that I wish to display under each image that should wrap with the image width as well (and as I said, the image width may vary).

解决方案

The red portion of the item is an artifact of the browser not knowing how to correctly size the containers. It's using the length of the text to determine the width before the table layout is applied. If you know the width of the items, you can use this simpler approach:

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

I don't know off hand of a way to make the elements shrink to the smallest possible width while still containing all child elements.

这篇关于为什么这些内嵌块元素会产生额外的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！