自适应内部元素_html/css_WEB-ITnose

设计场景


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

应用场景


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

perfect.png

分析:

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

老式解决方案


  • 代码结构

    文本

    %20%20
    标题/描述

    文本

  • %20%20%20%20
  • 为了得到正确的宽度,我们给%20figure%20元素浮动,但却引发了新的问题,整个布局模式改变了

  • %20%20%20
%20%20%20

%20%20%20%20%20%20%20%20%20%20%20

%20%20%20%20%20float.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》

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: