Question

我在父div中有一个图像。我还希望在父div中的图像下面有一些文本，但我只希望该文本div的宽度与图像一样大。

<div class="parent">
    <div class="child">
        <div class="image-container">
            <img src="..." />
        </div>
        <div class="text">
        ...
       </div>
    </div>
</div>

这是一个说明我的问题的jsfiddle： jsfiddle

我该如何解决这个问题？我无法将文本放在与图像相同的div中，因为图像是使用max-height css切断的。

Answer 1

我简化了你的标记和css。您可以将它们保存在同一个父级中。对文本使用position绝对位置并相对于其父级添加位置。这样就会占用父母的宽度。并且父级的宽度将根据图像的大小设置，因此文本的宽度与当天结束时的图像宽度相同。

HTML：

<div class="parent">
    <div class="image-container">
        <img src="http://lorempixel.com/400/600/" />
        <div class="text">
            text   
        </div>
    </div>
</div>

CSS：

.parent {
    width: 700px;
}
.image-container {
    background: green;
    float:left;
    position: relative;
}

div.text {
    background: green;
    position: absolute;
    width:100%;
    left:0;
}

jsfiddle

Answer 2

这是你追求的吗？你能用jquery吗？

$('.child').width($('.image-container').width());

http://jsfiddle.net/YRYZA/

Answer 3

这样做：

.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }

然后.child div将与图像一样宽（不受.text宽度影响），而.text将适合空间。

JSFiddle：jsfiddle.net/8hV2E/12

使div只与兄弟一样宽

3 个答案: