如何限制内嵌块元素内的子元素宽度？

我怎样才能约束一个inline-block元素内的孩子的宽度？如何限制内嵌块元素内的子元素宽度？

假设我的目标是最新的浏览器。

给定使用inline-block显示的元素，我如何约束一个子元素，使其不会伸缩超出父母的女巫。

在实际应用中，我试图建立一个系统，将采取任何宽度的图像，并且保持约束到父容器的宽度标题：

无需指定宽度
而不使用jQuery或其他DOM操作

CSS

<style> 
div { 
    width:800px; 
    background-color:silver; 
    text-align: center; 
} 
figure { 
    display:inline-block; 
    background-color: orange; 
    padding: 1em; 
    margin: 0; 
} 
figcaption { 
    background-color:pink; 
} 
</style>

HTML

<div> 
    <figure> 
     <img src="http://i.techrepublic.com.com/blogs/11062012figure_a.gif" /> 
     <figcaption> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     </figcaption> 
    </figure> 
</div>

来源

2013-07-15 mmcglynn

你试过'figure> * {max-width：100％; ''？ –

'最大宽度：100％'会做到这一点。但它将是'div'的宽度，这是唯一一个实际上具有“宽度”集合的人。 – RaphaelDDL

试过了，没有变化。 – mmcglynn

在我看来添加以下代码，可以帮助你：

figure {width: 100%;} 
img {width: 100%;}

在任何情况下，如果你想只用CSS来做到这一点，那么你就需要用百分比玩。

来源

2013-07-15 16:58:05

这个想法是，我想要图像的宽度来决定图形容器的宽度和标题。将这两个设置为100％都可以，但会消除图像宽度和变化。 – mmcglynn

如何限制内嵌块元素内的子元素宽度？

回答

相关问题