如何约束内联块元素中子项的宽度？

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做这个，那么你需要玩百分比。