Confocal培养皿:在相反的方向上培养 flexbox儿童

我想在 Bootstrap 4 列 / 卡中实现此效果:

flexbox 有可能吗?

这是我的源代码,我玩:

https://jsfiddle.net/dandaka/us04p2vg/
<div cl="container">
  <div cl="row">
    <div cl="col">
      <div cl="img-top"><img src="https://placeld.it/350x100" alt="" cl="img-fluid"></div>
      <div cl="text-bottom">Lorem ipsum</div>
    </div>
    <div cl="col">
      <div cl="img-top"><img src="https://placeld.it/350x50" alt="" cl="img-fluid"></div>
      <div cl="text-bottom">Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt</div>
    </div>
    <div cl="col">
      <div cl="img-top"><img src="https://placeld.it/350x250" alt="" cl="img-fluid"></div>
      <div cl="text-bottom">Lorem ipsum dolor sit amet</div>
    </div>
  </div>
</div>

我曾想过以下解决方案:

对图像和文本使用多行。在小断点中堆叠时将工作不良。并且整个卡应该具有悬停状态,当在 2 行中断开时将工作不良。

使用 Bootstrap 卡。它们似乎只适用于固定高度的图像。

在 flexbox 中使用基线对齐。找不到任何示例,其中两个元素从一个轴在不同方向上增长。

修复文本块高度(以像素为单位)。根本不是解决方案,只是一种解决方法。

想不出别的了。

0

一种方法是在顶部图像和下部文本上设置% 高度。然后使用 flexbox 相应地对齐项目..

<div cl="row align-items-baseline">
    <div cl="col">
        <div cl="img-top d-flex h-50"><img src="https://placeld.it/350x100" alt="" cl="align-self-end img-fluid"></div>
        <div cl="text-bottom p-3 h-50">Lorem ipsum her eis some more text</div>
    </div>
    <div cl="col">
        <div cl="img-top d-flex h-50"><img src="https://placeld.it/350x50" alt="" cl="align-self-end img-fluid"></div>
        <div cl="text-bottom p-3 h-50">Lorem ipsum dolor sit amet, consectetur adicing elit, sed do eiusmod tempor incididunt</div>
    </div>
    <div cl="col">
        <div cl="img-top d-flex h-50"><img src="https://placeld.it/350x250" alt="" cl="align-self-end img-fluid"></div>
        <div cl="text-bottom p-3 h-50">Lorem ipsum dolor sit amet</div>
    </div>
</div>
http://www.codeply.com/go/vc8Mk2Rjm0

我使用 50 / 50,因为它包含在 BS4 中,但是您可以自定义顶部 / 底部的比例。

.h-40 {
    height: 40%;
}
.h-60 {
    height: 60%;
}
http://www.codeply.com/go/whe449Ixtx

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(827)
Cosx/cos2x:Python:如何绘制y=cosh(x)*cos(5x)
上一篇
Jid eos:如何区分用户的JID和MUC的JID
下一篇

相关推荐

  • docker游戏服务器:如何使用Docker搭建高性能的游戏服务器

    Docker游戏服务器是一种将游戏服务器部署到容器中的方式,它可以帮助游戏开发者快速、轻松地部署游戏服务器,并且可以更轻松地扩展游戏服务器的容量。…

    2023-04-27 09:55:33
    0 73 90
  • win7玩cf卡顿怎么解决:解决Win7环境下CF游戏卡顿问题

    尝试更新系统:可能是由于系统缺少某些补丁或者更新导致CF卡顿,可以尝试在Windows Update中进行检查更新,并安装最新的补丁和更新。更新显卡驱动:可能是由于显卡驱动过旧或者不兼容导致CF卡顿,可以尝试更新显卡驱动,可以到显卡厂商官网下载最新的驱动进行安装。…

    2023-05-27 11:45:17
    0 27 85
  • cv糖醋排骨是弯的吗弯曲的美味

    cv糖醋排骨不是弯的,它是一种制作方法,通常用来制作排骨。代码:…

    2023-04-01 13:03:36
    0 58 87
  • java ee eclipse使用:如何使用Java EE Eclipse来开发Web应用

    示例示例Java EE Eclipse使用步骤:安装Eclipse IDE。…

    2023-10-12 04:51:32
    0 26 89
  • cookie如何使用:如何使用Cookie来改善用户体验

    Cookie是一种存储在客户端的小型文件,用于记录用户的信息,如访问时间、登录状态等。使用Cookie可以更好地为用户提供服务,比如保存用户的登录状态,记录用户的浏览历史记录等。…

    2023-05-07 02:18:11
    0 74 28
  • cv小敢:如何利用CV小敢提升职业技能?

    cv小敢(Computer Vision Tiny-YOLO)是一种轻量级的物体检测算法,它可以在资源受限的设备上运行,如嵌入式设备、智能手机等。它是基于YOLO(You Only Look Once)算法的一个变体,由Joseph Redmon和Ali Farhadi开发,旨在提高深度学习模型的性能,同时减少模型的大小和计算复杂度。…

    2023-02-09 13:08:59
    0 25 61
  • ubuntu如何编译c语言:在Ubuntu上编译C语言程序的步骤

    示例示例Ubuntu编译C语言的步骤如下:安装gcc编译器:…

    2023-09-08 12:39:20
    0 86 37
  • coremail论客邮箱Coremail论客邮箱

    Coremail论客邮箱是一款专业的企业邮箱服务,可以满足企业对安全、可靠性和高效性的要求。它拥有强大的安全性能,可以提供多种安全保护,包括防止邮件被窃取、拦截恶意邮件、防止跨站脚本攻击等。此外,它还支持多种企业级功能,如组织架构管理、收发邮件管理、文件共享管理、联系人管理等,可以帮助企业提高工作效率,提升企业形象。…

    2023-02-25 04:36:55
    0 27 37

发表评论

登录 后才能评论

评论列表(76条)