在flex弹性盒中使img图片垂直底部对齐而不被拉伸

最新推荐文章于 2025-07-07 14:25:26 发布

原创最新推荐文章于 2025-07-07 14:25:26 发布 · 4.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flex中img垂直对齐不被拉伸

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个选择题中多个选项如何实现高度自适应的布局技巧，确保每个选项等高且图片垂直居底部对齐，通过使用Flexbox布局实现高度自适应和垂直对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样例:一个选择题几个选项高度自适应
要求:每个选项等高(以最高为准) 选项中图片(图片高度不一致)垂直居底部对齐
html

<div class='question'>
      <div class=option>
          <p>选项一</p>
          <div class='bottom-img'>
              <div>
                 <img src='**'>
                 <span></span>
              </div>
          </div>
      </div>
      
       <div class=option>
          <p>选项一</p>
          <div class='bottom-img'>
              <div>
                 <img src='**'>
                 <span></span>
              </div>
          </div>
      </div>
</div>

css

.question,.option{
    display:flex;
}
.option{
    height: 100%;
    display: flex;
}
.option>div{
    align-items:flex-end;
    flex-shrink: 0;
}
.option span{
    display: inline-block;
     height: 100%;
     vertical-align: bottom;
}
.option img{
     display: inline-block;
     vertical-align: bottom;
}