css中如何让图片居下

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,让图片居下的方法有两种: 使用绝对定位 使用flex布局第一种方法: img { position: absolute; bottom: 0; } 这样设置后,图片将会一直处于父元素的底部

在CSS中,让图片居下的方法有两种:

  1. 使用绝对定位
  2. 使用flex布局

第一种方法:

 img {
    position: absolute;
    bottom: 0;
  } 

这样设置后,图片将会一直处于父元素的底部,如果希望图片距离底部有一定的间距,可以使用bottom属性设置一个值。

第二种方法:

 .parent {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  img {
    align-self: flex-end;
  } 

这里使用了flex布局,将父元素的flex-direction属性设置为column,表示子元素将沿着主轴(默认为水平方向)垂直排列。此外,使用justify-content属性将子元素放置到该轴的末尾。最后,使用align-self属性将图片自身对齐到末尾。

以上两种方法均可实现让图片居下的效果,具体使用哪种方法可以根据实际情况来选择。如果需要兼容性更好的方案,建议使用第一种方法。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何让图片居下

粉丝

0

关注

0

收藏

0

已有0次打赏