8

在不固定任何元素的宽度的情况下，我希望父 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;
}

我的 jsFiddle

任何意见是极大的赞赏

4

3 回答 3

7

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

更新了 jsfiddle

于 2013-07-30T19:12:36.867 回答
2

这是我发现的最好的：

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

我所做的是使p标签脱离流动，position: absolute以便包含的 div 具有仅图像的宽度。然后，让p标签继承其父容器的宽度。这不固定p标签的宽度，并且完全跨浏览器。

于 2013-07-30T19:13:27.360 回答
0

这意味着您必须向上移动 DOM 树，因为您希望图像确定它的父宽度。不幸的是，向上移动 DOM 树是不可能的（目前）。

作为替代方案，您可以定位文本 absolute，将其从文档流中提升出来，因此不会影响其父 div 的宽度。然而，这也意味着高度不会受到影响，这可能不是你所追求的。您可以通过重复父背景来模仿正确的高度，但下面的内容不会被下推，所以我认为这也不是一个真正的选择。无论如何，我设置了一个示例：http: //jsfiddle.net/y8Qnd/2/

我能想到的唯一选择是javascript。获取图像的宽度并将其应用到父容器。在 jQuery 中（我可能会因为将 jQuery 用于如此微不足道的事情而受到抨击，但我只是不再习惯编写“老派 javascript”......）它看起来像这样：

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/

于 2013-07-30T19:13:11.617 回答