Question

如果没有固定任何元素的宽度，我希望父div元素在设置宽度时忽略文本。我希望元素的宽度仅受图像宽度的影响。

<div>
    <img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
    <p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>

div {
    background: green;
    display: inline-block;
}

my jsFiddle

非常感谢任何建议

Answer 1

将div的显示属性更改为table-caption
（在firefox和chrome中测试过）

更新了jsfiddle

Answer 2

这是我找到的最好的：

http://jsfiddle.net/y8Qnd/3/

我所做的是将p标记从position: absolute移出流程，以便包含div的宽度仅为图像。然后，让p标记继承其父级容器的宽度。这不会修复p标记的宽度，而是完全跨浏览器。

Answer 3

这意味着您必须向上移动DOM树，因为您希望图像确定它的父宽度。 遗憾的是，向上移动DOM树（还）。

作为替代方案，您可以定位文本绝对，将其从文档流中提取出来，因此不会影响它的父div的宽度。然而，这也意味着高度不受影响，这可能不是你所追求的。您可以通过重复父背景来模仿正确的高度，但下面的内容不会被推下，所以这也不是我认为的选项。我还是建立了一个例子：http://jsfiddle.net/y8Qnd/2/

我能想到的唯一选择是javascript。获取图像的宽度并将其应用于父容器。在jQuery中（我可能会因为使用jQuery这样一个琐碎的事情而受到抨击，但我只是不习惯编写＆＃39;旧学校javascript＆＃39;再...）它看起来像这样：

var $wrapper = $('div');  // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);

和一个例子：http://jsfiddle.net/y8Qnd/6/

CSS父元素忽略子元素内的文本以确定宽度

3 个答案: