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

Question

如何限制内inline-block元素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>

Answer 1

我认为添加以下代码可以为您提供帮助：

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

在任何情况下，如果您只想使用CSS进行操作，则需要使用百分比。