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

设计场景

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

应用场景

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

perfect.png

分析：

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

老式解决方案

• 代码结构

  <p>文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                      <div class="aritcle_card">
                          <a class="aritcle_card_img" href="/ai/854">
                              <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png" alt="腾讯元宝">
                          </a>
                          <div class="aritcle_card_info">
                              <a href="/ai/854">腾讯元宝</a>
                              <p>腾讯混元平台推出的AI助手</p>
                              <div class="">
                                  <img src="/static/images/card_xiazai.png" alt="腾讯元宝">
                                  <span>223</span>
                              </div>
                          </div>
                          <a href="/ai/854" class="aritcle_card_btn">
                              <span>查看详情</span>
                              <img src="/static/images/cardxiayige-3.png" alt="腾讯元宝">
                          </a>
                      </div>
                  <figure>  <img src="" alt=""    style="max-width:90%" 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》