用CSS让元素宽度自适应内部元素的方法

 2016-10-08 10:11

众所周知,如果不给元素指定一个具体的height,它就会自动适应其内容的高度。假如我们希望width也具有类似的行为,该怎么做呢?

图片
        众所周知,如果不给元素指定一个具体的height,它就会自动适应其内容的高度。假如我们希望width也具有类似的行为,该怎么做呢?从这个案例中,我们来找寻答案吧。

举例来说,假设我们用HTML5来标记图片元素,结构代码可能是这样的:

<figure>
    <img src="..." alt="...">
    <figcaption>
        众所周知,如果不给元素指定一个具体的height,它就会自动适应其内容的高度。
        假如我们希望width也具有类似的行为,该怎么做呢?从这个案例中,我们来找寻答案吧。
    </figcaption>
</figure>
图片
        众所周知,如果不给元素指定一个具体的height,它就会自动适应其内容的高度。假如我们希望width也具有类似的行为,该怎么做呢?从这个案例中,我们来找寻答案吧。

为了显示清楚结构我们给它增加了一个边框,目前这个效果与我们期望还有不小的差距:文本行比图片要宽多了。如何让figure的宽度由它内部图片来决定呢,相信熟悉CSS的朋友有不少方法:

  • 让figure元素浮动会让它得到正确的宽度,但同时也彻底改变了它的布局;

  • 对figure应用display:inline-block会让它根据内容决定自身的尺寸,但和我们想要的方式还是不一样。此外,即使它的宽度计算方式与我们的期望一致,我们也很难继续完成水平居中的任务。我们需要对它的父元素应用text-align:center,然后对这个父元素的所有子元素都设置一边text-align:left

  • 当开发者走投无路时,就只能对figure应用一个固定的width或者max-width了,然后对figure>img应用max-width:100%。可说这个方法无法充分利用有效空间;对于过小的图片来说,布局效果也很突兀,响应式更无从谈起。

CSS内部与外部尺寸模型(第三版)是一个相对较新的规范,它对width和height属性定义了一些新的关键字,其中最有用的应该就是min-content了。这个关键字将解析为这个容器内部最大的不可断行元素的宽度(即最宽的单词、图片或者具有固定宽度的盒元素)。这正是我们梦寐以求的。

现在,我们使用两行简单的CSS代码就可以把figure设置为恰当的宽度,并让它水平居中了:

.figure{
    width:min-content;
    margin:auto;
}

为了给旧浏览器提供一个平稳的回退样式,我们需要使用这个技巧的同时,提供一个固定的max-width值:

.figure{
    max-width:300px;
    max-width:min-content;
    margin:auto;
}
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: