css - 如何限制内联 block 元素中子元素的宽度？

Question

如何限制 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 来做到这一点，那么您需要使用百分比。