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

最新推荐文章于 2024-07-08 11:25:57 发布

jokren

最新推荐文章于 2024-07-08 11:25:57 发布

阅读量4.8k

点赞数

分类专栏： css 文章标签： flex中img垂直对齐不被拉伸

本文链接：https://blog.csdn.net/jokren/article/details/85317672

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

样例:一个选择题几个选项高度自适应
要求:每个选项等高(以最高为准) 选项中图片(图片高度不一致)垂直居底部对齐
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;
}