3

我经常发现自己对内联文章图像使用代码块，如下所示：

...article text.
<div class="article-image right" style="width: 250px;">
    <img src="..." width="250" alt="" />
    <p class="caption">Potentially long image caption</p>
</div>
More article text...

或者，更简洁的 HTML5 版本：

...article text.
<figure class="right" style="width: 250px;">
    <img src="..." width="250" alt="" />
    <figcaption>Potentially long image caption</figcaption>
</figure>
More article text...

img由于我使用动态处理图像的 CMS，我一直在动态定义图像的大小（在本例中为 250 像素），并且我也一直在将大小限制应用于包含标题。这样，标题永远不会增加父元素的大小超出img标签的定义宽度。

我的问题是，是否有一些 CSS 技巧可以应用于其中一个元素，无需手动定义宽度即可完成相同的事情？某种方法可以防止标题扩展其父元素的宽度，但允许它们影响高度？当然父元素的宽度还是需要适应img的宽度...

4

2 回答 2

16

要阻止子元素影响父宽度，请将其应用于子元素：

    min-width: 100%;
    width: 0;

这绕过了使用绝对定位的解决方案。

对于垂直排列它们，还可以使用：

    vertical-align: top;

JSFiddle：http: //jsfiddle.net/ETkkR/87/

于 2016-03-18T19:20:56.607 回答
0

div 或图形元素的 CSS 代码就足够了。

style="width: 250px; 
**max-width:250px;"**

即使图像的宽度较高，这也会将静态宽度设置为 div 或图形标签

于 2013-09-25T13:38:24.473 回答