防止段落增加浮动父级的宽度 [英] Prevent paragraph from increasing the width of a floated parent

问题描述

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

  ...文章文本。 
< div class =article-image rightstyle =width：250px;> 
< img src =...width =250alt =/> 
< p class =caption>潜在的长图像标题< / p> 
< / div> 
更多文章文本... 
  

或者，更简洁的HTML5版本：

  ...文章文字。 
< figure class =rightstyle =width：250px;> 
< img src =...width =250alt =/> 
< figcaption>可能是长图像标题< / figcaption> 
< / figure> 
更多文章文本... 
  

由于我使用CMS来即时处理图片，我一直在动态地定义图像的大小（在这种情况下为250px），并且我也一直将这种大小限制应用于包含 img 和它的标题。这样，标题永远不会增加 img 标记的定义宽度以上的父元素的大小。

我的问题是，如果有一些CSS技巧，我可以应用于其中一个要完成同样的事情的元素，而不需要手动定义宽度？有些方法可以防止标题在宽度上扩展其父元素，但是允许它们影响高度？当然，父元素的宽度仍然需要适应 img 的宽度...

解决方案

  min-width：100 
 
 ％; 
 width：0; 
  

这个解决方案使用绝对定位。

垂直排列它们，也可以使用：

  vertical-align：top; 
  

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

I often find myself using code blocks for inline article images like the following:

...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...

Or, the more succinct HTML5 version:

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

Since I use a CMS that processes images on the fly, I've been defining the size of the image (250px in this case) dynamically, and I've also been applying that size restriction to the parent element that contains both the img and its caption. This way, the caption never increases the size of the parent element beyond the defined width of the img tag.

My question is if there is some CSS trick I can apply to one of the elements that will accomplish the same thing without manually defining the width? Some way to prevent the captions from expanding their parent element in width, yet allowing them to influence the height? Of course the parent element's width still needs to adapt to the img's width...

解决方案

To stop children elements from affecting parent width apply this to the child:

    min-width: 100%;
    width: 0;

This gets around solutions using absolute positioning.

For vertically lining them up, also use:

    vertical-align: top;

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

这篇关于防止段落增加浮动父级的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！