html - 想要文本包裹在 div 中

Question

在我下面的代码中，我有 3 张图片，其中一些图片下方有标题。我不希望文本的宽度超过图像的宽度。注意:图像的宽度可能会有所不同。它不是一个固定的宽度。如果文本超过图像的宽度，则文本需要换行。我在下面的代码中遇到的另一个问题是第二个和第三个图像在图像底部显示了一些填充。此图像周围的边框不应有填充。

http://jsfiddle.net/AndroidDev/Asu7V/15/

<div style="width:300px; overflow-x: auto;white-space: nowrap;">
    <div style="vertical-align:top">
        <div class="x">
            <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
            <div style="white-space:wrap">Grumpy Cat is a famous cat</div>
        </div>
        <div class="x">
            <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
            <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
        </div>
        <div class="x">
            <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
        </div>
    </div>
</div>

Answer 1

因为你没有为你的 div 元素分配任何 width 所以分配它，而不是使用 white-space: normal;

<div style="white-space: normal; width: 130px;">Grumpy Cat is a famous cat</div>

Demo

再次提醒您避免使用内联样式..

此外，当您修复仅包含图像的包装器 div 时，最好使用 max-width 和 max-height您的 img，这样它将确保它不会溢出。

此外，最后但并非最不重要的一点是，考虑使用 p 元素代替 div，这将为您的文本赋予一些语义意义。

---

您使用的是 white-space: wrap;，其中 wrap 不是 white-space 属性的有效值，因此您需要正常

---

正如您评论的那样，您想要摆脱两边的空白，因此，通过为包装元素分配一些固定的 width 来修复包装元素，以及下面的空白图像问题，可以通过在包装元素上使用 font-size: 0; 来解决，而不是将一些 font-size 分配给文本，或者更好的方法来go 是为你的 img 元素使用 display: block;。