html给图片设置设置box,html – 在flexbox布局中设置图像基线

我正在尝试使用flexbox创建一个多列布局,并在所有列中对齐基线.我使用align-items:baseline属性执行此操作.现在,当每列中的第一个元素是文本时,这很有用,例如:

CSS

.container {

display: flex;

align-items: baseline;

}

.col-2 {

width: 48%;

}

HTML

Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis nulla in elit hendrerit congue. Nullam eleifend, neque vitae finibus accumsan, augue dui lacinia leo, eget sagittis ipsum dui id leo.

我遇到的问题是当列中的第一个元素是图像时,如下所示:

Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.

8babc0637cac9f38c09501bac85d984d.png

第一列中的标题与第二列中图像的底部对齐.我想要做的是更改图像基线,以便标题将移动到列的顶部.我知道您可以通过将align-items属性设置为flex-start来解决此问题,但我更愿意保留align-items属性.这样,无论有多少列,文本基线都将始终对齐.

我的目标 – 弄清楚如何在不改变.container类的情况下调整图像基线.这可能吗?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值