如何强制元素具有其子图像宽度而不是其子段落

Question

我提出了一个问题的基本例子：

http://codepen.io/luksak/pen/Lbnga

我有一个WYSIWYG编辑器，作者可以在博文中嵌入任何宽度和高度的浮动图像。这些图像在兄弟<p>标记中有描述。此描述的宽度不应超过其图像的宽度。

这是我失败的地方。我试过浮动子元素。我尝试使用display: table-cell;但没有成功。当然我可以使用一些硬编码宽度，但这不适用于我的动态图像大小。当然我可以用JS来完成这个，但我真的认为这应该在CSS中解决。

有没有办法实现这个目标？

Answer 1

您可以使用display的{​​{1}}值和table缩小width的范围。

然后容器会扩展到它所包含的最大盒子宽度（大部分就像图片一样）。

<强> DEMO

---

min-width

Answer 2

最好的方法是通过编辑器创建一个具有特定宽度的区域。

如果你想用js做，请记住，当代码改变文本显示时，显示将在用户面前改变。

我的解决方案只有在有两个条件时才会运行：p元素具有特定的类名（仅用于识别目的），它直接位于img元素之后

var desc = document.getElementsByClassName('img_desc'); // find all descriptions tags
for (var i=0; i<desc.length; i++) {
    img = desc[i].previousElementSibling; // get the image element
    if (img && img.nodeName == 'IMG')
        desc[i].style.width = window.getComputedStyle(img, null).width; // set the width
}

我仍然认为这只是最后的手段，你最好在创建/编辑时这样做。

注意：IE仅支持版本9及更高版本的getElementsByClassName。