首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

flexbox中的等高引导卡

作者：fly-fox | 来源：互联网 | 2023-02-11 08:58
如何解决《flexbox中的等高引导卡》经验，为你挑选了1个好方法。

我正在为我的卡片组使用flexbox。问题是，我想柔性项div与.card类应保持同样的高度，如果里面的文字.card-block.p在一个卡牌高度的增加，其余也与卡增加。

这是我的小提琴：https : //jsfiddle.net/a2d758jg/ ：

.card-group {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  max-height: 475px;
  background-color: lightgrey;
}

.card img {
  width: 100%;
}

.card {
  background-color: cornflowerblue;
  width: 30%;
  margin: 0px;
  flex: 2;
  border: 1px solid lightgrey;
}

.card-block {
  padding: 10px;
  background-color: #fff;
}

.card-title {
  font-size: 18px;
  color: grey;
  font-family: verdana, sans;
}

.card-footer {
  padding: 15px;
  border-top: 1px solid lightgrey;
  background-color: lightgrey;
}

  

    

      Card image cap
      

        
Card title

        
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

      

      

        Last updated 3 mins ago
      

    

    

      Card image cap
      

        
Card title

        
This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional
          content.

      

      

        Last updated 3 mins ago
      

    

    

      Card image cap
      

        
Card title

        
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

      

      

        Last updated 3 mins ago

Michael_B.. 6

对您的代码进行四个调整：

.card-group {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  /* max-height:475px; <-- remove */
  background-color: lightgrey;
}

.card img {
  width: 100%;
}

.card {
  background-color: cornflowerblue;
  width: 30%;
  margin: 0px;
  flex: 2;
  border: 1px solid lightgrey;
  display: flex;           /* new */
  flex-direction: column;  /* new */
}

.card-block {
  padding: 10px;
  background-color: #fff;
  flex: 1;                /* new */
}

.card-title {
  font-size: 18px;
  color: grey;
  font-family: verdana, sans;
}

.card-footer {
  padding: 15px;
  border-top: 1px solid lightgrey;
  background-color: lightgrey;
}

  

    

      Card image cap
      

        
Card title

        
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

      

      

        Last updated 3 mins ago
      

    

    

      Card image cap
      

        
Card title

        
This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional
          content.

      

      

        Last updated 3 mins ago
      

    

    

      Card image cap
      

        
Card title

        
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

      

      

        Last updated 3 mins ago

修正的小提琴



1> Michael_B..：

对您的代码进行四个调整：

.card-group {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  /* max-height:475px; <-- remove */
  background-color: lightgrey;
}

.card img {
  width: 100%;
}

.card {
  background-color: cornflowerblue;
  width: 30%;
  margin: 0px;
  flex: 2;
  border: 1px solid lightgrey;
  display: flex;           /* new */
  flex-direction: column;  /* new */
}

.card-block {
  padding: 10px;
  background-color: #fff;
  flex: 1;                /* new */
}

.card-title {
  font-size: 18px;
  color: grey;
  font-family: verdana, sans;
}

.card-footer {
  padding: 15px;
  border-top: 1px solid lightgrey;
  background-color: lightgrey;
}

  

    

      Card image cap
      

        
Card title

        
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

      

      

        Last updated 3 mins ago
      

    

    

      Card image cap
      

        
Card title

        
This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional
          content.

      

      

        Last updated 3 mins ago
      

    

    

      Card image cap
      

        
Card title

        
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

      

      

        Last updated 3 mins ago

推荐阅读
  • ip

    WordPress Duplicator 0.4.4 版本存在跨站脚本攻击漏洞分析

    在对WordPress Duplicator插件0.4.4版本的安全评估中，发现其存在跨站脚本（XSS）攻击漏洞。此漏洞可能被利用进行恶意操作，建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的，使用时需自行承担风险。漏洞编号：HTB23162。 ... [详细]
  • utf-8

    网站访问全流程解析

    网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • python

    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统

    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • python

    您的数据库配置是否安全？DBSAT工具助您一臂之力！

    您的数据库配置是否安全？DBSAT工具助您一臂之力！
    本文探讨了Oracle提供的免费工具DBSAT，该工具能够有效协助用户检测和优化数据库配置的安全性。通过全面的分析和报告，DBSAT帮助用户识别潜在的安全漏洞，并提供针对性的改进建议，确保数据库系统的稳定性和安全性。 ... [详细]
  • tags

    Yii2 视图与布局中各类函数的详细解析及其应用场景综述

    本文详细解析了 Yii2 框架中视图和布局的各种函数，并综述了它们在实际开发中的应用场景。通过深入探讨每个函数的功能和用法，为开发者提供了全面的参考，帮助他们在项目中更高效地利用这些工具。 ... [详细]
  • python

    PyQt5 QTextEdit：深入解析Python中多功能GUI库的应用与实现

    PyQt5 QTextEdit：深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定，提供了超过 620 个类和 6000 个函数及方法，广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件，支持丰富的文本编辑功能，如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能，还在于其易用性和灵活性，使其成为开发复杂用户界面的理想选择。 ... [详细]
  • get

    HTML5大文件传输技术深度解析与实践分享

    HTML5大文件传输技术深度解析与实践分享
    本文深入探讨了HTML5在Web前端开发中实现大文件上传的技术细节与实践方法。通过实例分析，详细讲解了如何利用HTML5的相关特性高效、稳定地处理大文件传输问题，并提供了可供参考的代码示例和解决方案。此外，文章还讨论了常见的技术挑战及优化策略，旨在帮助开发者更好地理解和应用HTML5大文件上传技术。 ... [详细]
  • default

    Spring – Bean Life Cycle

    Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • utf-8

    javascript分页类支持页码格式

    javascript分页类支持页码格式
    前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]
  • utf-8

    php更新数据库字段的函数是,php更新数据库字段的函数是

    php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • utf-8

    如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解

    如何将TS文件转换为M3U8直播流：HLS与M3U8格式详解
    在视频传输领域，MP4虽然常见，但在直播场景中直接使用MP4格式存在诸多问题。例如，MP4文件的头部信息（如ftyp、moov）较大，导致初始加载时间较长，影响用户体验。相比之下，HLS（HTTP Live Streaming）协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段，并生成一个M3U8播放列表文件，实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流，包括技术原理和具体操作步骤，帮助读者更好地理解和应用这一技术。 ... [详细]
  • python

    软件测试工程师必备：全面解析Web应用的浏览器兼容性测试方法与工具

    软件测试工程师必备：全面解析Web应用的浏览器兼容性测试方法与工具
    随着市场上浏览器种类的不断增多，特别是在平板和移动设备上的普及，确保网站在各种浏览器中都能正常运行变得尤为重要。本文将深入探讨Web应用的浏览器兼容性测试方法与工具，帮助软件测试工程师全面掌握这一关键技能，以提高应用的用户体验和可靠性。 ... [详细]
  • utf-8

    可转债数据智能抓取与分析平台优化

    可转债数据智能抓取与分析平台优化
    本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息（排除已发布赎回的债券），并结合安道全教授提出的三条安全线投资策略，新增了建仓线、加仓线和重仓线，以提供更精准的投资建议。 ... [详细]
  • utf-8

    工作154：深入解析代码中的position属性及其解决方案

    本文详细探讨了代码中 `position` 属性的使用方法及其常见问题，并提出了多种有效的解决方案。通过实例分析，文章不仅解释了 `position` 属性的不同值（如 `static`、`relative`、`absolute` 和 `fixed`）在不同场景下的应用，还讨论了其对布局和定位的影响。此外，文章还提供了一些实用的调试技巧和最佳实践，帮助开发者更好地理解和应用这一重要 CSS 属性。 ... [详细]
  • python

    【Python爬虫实操】 不创作小说，专精网站内容迁移，超高效！（含源代码）

    【Python爬虫实操】 不创作小说，专精网站内容迁移，超高效！（含源代码）
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移，涵盖前端、后端及Android相关知识点。通过具体实例和源代码，展示了如何精准抓取并迁移网站内容，适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
author-avatar
fly-fox
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有