自适应内部元素

作者: adiu | 来源:发表于2016-06-07 12:20 被阅读103次

设计场景


  • 如果我们不给元素指定固定的高度(height),它会根据其内容的高度自适应。我们希望宽度(width)也具有类似的行为

应用场景


我们用一幅图来展示实际的应用场景:

perfect.png

分析:

  • 宽度由 内部因素 来决定,而不是由 外部因素 来决定的
  • 水平居中

老式解决方案


  • 代码结构
<p>文本</p>
<figure>
    <img src="" alt="" width="" height="" />
    <figcaption>标题/描述</figcaption>
</figure>
<p>文本</P>
  • 为了得到正确的宽度,我们给 figure 元素浮动,但却引发了新的问题,整个布局模式改变了
float.png
  • 对figure元素应用 display: inline-block 让它根据内容来决定自身的尺寸,这样虽然可以达到正确的宽度,但在水平居中上却让我们实现起来有点繁琐:我们需要对父元素应用 text-align: cener 属性,然后对不需要居中的子元素都设置 text-align: left 属性
inline-block.png

新式解决方案


figure {
    max-width: 502px;
    max-width: min-content;
    margin: 20px auto;
}
figure > img {
    max-width: inherit;
}

说明:

  • min-content 属性,它获取的是这个容器内部最大的不可断行元素的宽度(最宽的单词、图片或具有固定宽度的元素),在这里起到了很重要的作用
  • 为浏览器的兼容做了一个回退样式

《CSS SECRETS》

相关文章

  • 自适应内部元素

    需求:figure元素能和它包含的图片一样宽,即内容根据图片自适应。 未自适应的效果: 文字比图片要宽得多 想要的...

  • 自适应内部元素

    设计场景 如果我们不给元素指定固定的高度(height),它会根据其内容的高度自适应。我们希望宽度(width)也...

  • 36、自适应内部元素

    CSS3新增width属性的min-content关键字,这个关键字将解析为整个容器内部最大不可断行元素的宽度(即...

  • QML 元素自适应内部元素的宽高变化

    QML 元素自适应内部元素的宽高变化 1. 背景 在 QML 开发中我们常常需要处理包含大量视图元素的情况。其中,...

  • h5总结心得

    1:html元素,块级元素(有固定高,高度不自适应),都会被内部元素撑破溢出。 2、 块格式化上下文(BFC)有下...

  • 子元素浮动导致父元素高度塌陷解决方案

    高度塌陷是指父元素在未指定高度的情况下(高度自适应子元素高度),其内部的子元素因为设置了浮动属性,脱离文档流,导致...

  • 关于iframe中的body高度100%问题

    如上代码展示为: body自适应了iframe的高度,并没有遵循 『块级元素高度由其内部文档流元素的高度总和决定 ...

  • 外层元素固定宽度 内部同行两元素宽度自适应处理

    右侧元素根据左侧元素自适应

  • 【width:min-content】自适应内部元素

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

  • 高度塌陷

    1、自适应宽高 (1)块级元素宽度设置为100%,或者不设置,默认为父元素的宽 (2)高度自适应:不设置父元素的高...

网友评论

    本文标题:自适应内部元素

    本文链接:https://www.haomeiwen.com/subject/nkuddttx.html