将div宽度限制为其内部流体图像的宽度

晚上前端向导。我试图做一些应该很简单的事情：我想让图片在我的正文内容中正确或左移，每张图片下方都有一个标题。为了尝试实现这一点，我将浮动div的图像放在里面，然后在下面添加一个标题。我给了图像最大宽度100％，所以我的布局是响应。将div宽度限制为其内部流体图像的宽度

有没有什么办法只使用CSS和HTML，我可以将包含div的宽度限制为图像内部的宽度？我发现下面的跨度推出div的宽度，无论是显示：inline-block还是不显示。我希望跨度始终与图像的宽度相同，因此文本将与图像的右边缘一致。

我希望能够使用不同宽度的图像，因此在div上设置最大宽度并不是真正的诀窍。我可以用JQuery轻松完成，但那会是作弊。

任何建议感激地收到！你可以看到我在说什么在http://jsfiddle.net/andfinally/yBHjK/

来源

2012-02-05 And Finally

这听起来像你想包含div扩大它的宽度只适用于img元素而不是span元素。那是对的吗？

没有纯粹的CSS解决方案，JavaScript是达到目标的最佳方式。

两个类似的问题：

来源

2012-02-05 20:59:07

谢谢Skottt，基本上我想让标题文字在图像的宽度处换行。欢呼声为我指出了其他问题：其中一个问题正在谈论我正试图解决的问题。它包含这个链接http://www.cs.tut.fi/~jkorpela/www/captions.html以对这个问题提出一个很好的概要。 – 2012-02-05 23:25:55

我确实看过那个链接，但它看起来与你想要做的有些不同。但是让我们知道你是否找到了可行的方法。 – 2012-02-05 23:43:45

尝试设置一个max-width到容器，然后width: 100%图像。它应该工作。

看http://jsfiddle.net/nMEVd/1/

来源

2012-02-05 20:55:10 elclanrs

谢谢elclanrs。这是一个很好的解决方案。我也想这样做 - 我希望有一种方法可以保持图像的自然大小，但似乎没有。通过skottt的回答得到了最多信息，但我也很感激你，所以给它一个高分，谢谢！ – 2012-02-05 23:32:31

你可能想尝试添加：

style="word-wrap: break-word;"

的跨度elememt，或在CSS片材：

.image span { 
    word-wrap: break-word; 
}

编辑： 这应该打破span元素中的文本以适应两行或更多行，而不是延伸过去你的图片的宽度。

来源

2012-02-05 20:55:15

感谢Danny，当我第一次看到你的答案时，我哭了“尤里卡！”，但不幸的是，当我在JSFiddle和我的原始页面上尝试它时，跨度仍然没有中断。 – 2012-02-05 23:34:27

将div宽度限制为其内部流体图像的宽度

回答

相关问题