Question

所以我试图让图像下面的文字不要比图像本身宽。我无法弄明白。

如果父div具有固定宽度，但父级和图像内的宽度基于图像宽度可变，这将很容易。

我现在把它作为一个兄弟姐妹，但也许在图片div上做个孩子是解决方案。

这是一个jsfiddle：http://jsfiddle.net/z6f15coy/1/

     <div class='parent'>
        <div class="child_1">
            <img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg" >
        </div>
        <div class="child_2">
            Some text that is wider than the image goes here... Lorem ipsum whatever. 
        </div>
    </div>

真诚地感谢您的帮助。非常感谢。

Answer 1

您可以转发表格显示行为：

.parent {
    border: 1px solid #c4c4c4;
    padding:5px;
    margin:5px;
    display:table;
    width:1px;/* will extand to fit longest content (image or a very long word) */
}

<div class='parent' style="">
    <div class="child_1">
        <img src="http://cdn.pet360.com/pet360/Content/Images/CMS/Slideshows/cms_resized_large/cats-that-stay-small1.lg.jpg">
    </div>
    <div class="child_2">Some text that is wider than the image goes here... Lorem ipsum whatever.</div>
</div>

Answer 2

定义该div的宽度？

try this if i got you.

http://jsfiddle.net/z6f15coy/2/

在图像下方的div中创建文本采用图像的宽度

2 个答案: