如何限制内嵌块元素内的子元素宽度?
问题描述:
我怎样才能约束一个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>
答
在我看来添加以下代码,可以帮助你:
figure {width: 100%;}
img {width: 100%;}
在任何情况下,如果你想只用CSS来做到这一点,那么你就需要用百分比玩。
+1
这个想法是,我想要图像的宽度来决定图形容器的宽度和标题。将这两个设置为100%都可以,但会消除图像宽度和变化。 – mmcglynn
你试过'figure> * {max-width:100%; ''? –
'最大宽度:100%'会做到这一点。但它将是'div'的宽度,这是唯一一个实际上具有“宽度”集合的人。 – RaphaelDDL
试过了,没有变化。 – mmcglynn