1

如何限制元素内子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>
4

1 回答 1

0

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

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

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

于 2013-07-15T16:58:05.667 回答