0

我正在创建我的第一个博客模板。

我希望在其文章段落旁边有像维基百科这样的内联图像。我通过以下代码实现了这一点：

<div class="photo">
    <img src="image_file.jpg">
</div>
div[class='photo'] {
    margin: 10px;
    float: left;
    clear: left;
}
img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}

到目前为止一切正常。但是，我还想在图像文件下方添加一个标题，所以我介绍了一个

标题

紧接着

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

不幸的是，这<p>使得这张照片 div 扩展得比照片本身更大，导致它看起来很有趣。我希望它max-width和照片一样大，如果文字很大，请转到第 2 或第 3 行。

我怎样才能做到这一点？我试过了width: auto; display: block;，放入<p>另一个 div 但它失败了。

谢谢你的热心帮助。

PS。我知道一旦通过 JS 加载页面，我就可以解决这个问题，但我很想学习以正确的 CSS 方式解决它。谢谢！

4

2 回答 2

1

如果问题只是div宽度大于img宽度，您可以尝试p移出#photo并将两者放入另一个div：

<div class="photoBox">
    <div class="photo">
        <img src="image_file.jpg">
    </div>
    <p>Caption for the image file which might be long</p>
</div>

...然后相应地更改 CSS：

div.photoBox {
    margin: 10px;
    float: left;
    clear: left;
}
img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}
于 2012-08-16T13:39:44.220 回答
1

试试这个 -演示

HTML

<div class="photo">
    <img src="image_file.jpg">
    <p>Caption for the image file which might be long</p>
</div>

CSS

div.photo {
    margin: 10px;
    float: left;
    clear: left;
    position: relative;
    background: honeydew;
}

div.photo img {
    max-width: 500px;
    min-width: 150px;
    margin: 8px;
}


div.photo p {
    position: absolute;
    bottom: 12px;
    left: 10px;
    right: 8px;
    background: rgba(0, 0, 0, .4);
    color: #fff;
}
于 2012-08-16T13:36:01.820 回答