程序员经验分享-hwhale

相邻弹性盒容器中的内容垂直对齐

2024-04-07

我有多个项目说卡片。这些卡片需要水平堆叠，并且高度需要相同。这正在发生在我身上。

每张卡片都有图像、文本和按钮。每张卡片的图像和文本应采用任何卡片的最大高度，以便它们正确对齐。这不会发生在我身上。

如果图像和文本正确对齐，则按钮将始终在底部的每张卡片中对齐。

我一直在关注本教程 http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox但我有多张卡，这里只放三张。第三张卡片图像的高度也是通过 CSS 设置的。

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: flex;
  flex-wrap: wrap;
}

.partner-card {
  display: flex;
  flex: 1 0 20%;
  border-radius: 0;
  text-align: center;
  border: 3px solid blue;
  padding: 5px;/*3rem;*/
  margin-bottom: 3rem;
  max-width: 20%;
  margin: 5px;
}

.partner-card-content {
  display: flex;
  flex-direction: column;
}
/*
.card-content .image-container img {
  
  margin: 0;
  padding: 0;
}
*/
.partner-card-content .partner-image-container {
  border: 1px solid green;
  padding: 0;
  margin: 0;
  min-height: 11rem;
                display: flex;
                vertical-align: middle;
                align-items: center;
                justify-content: center;
                max-width: 100%;
}

.partner-card-content p /*, .card-content .image-container*/
{
  flex: 1 0 auto;
  border: 1px solid red;
}

.partner-card-content img.third-image {
  height: 5.5rem !important;
}
/*
p {
  font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/
<div class="partner-cards">

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>
  
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x100" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="primary-button" href="#">View ABC Offer</a>
    </div>
  </div>
</div>

它应该如何显示：

代码笔上的教程图像，正确对齐了 h2、文本和链接：


TL;DR

在 CSS 中，相邻 Flexbox 中的 Flexbox 项目的对齐是不可能的。你确实需要sub-grids https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid通过卡中各部分的动态大小来解决此问题。

弹性盒场景

无论如何，鉴于你有一个min-height为了partner-image-container，所以我想你可以有一个min-height设置为a or an ellipsis使其保持在一行。请参阅下面的解决方案，该解决方案添加了一个ellipsis:

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: flex;
  flex-wrap: wrap;
}

.partner-card {
  display: flex;
  flex: 1 0 20%;
  border-radius: 0;
  text-align: center;
  border: 3px solid blue;
  padding: 5px;/*3rem;*/
  margin-bottom: 3rem;
  max-width: 20%;
  margin: 5px;
}

.partner-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0; /* ADDED */
}


/*
.card-content .image-container img {
  
  margin: 0;
  padding: 0;
}
*/

.partner-card-content .partner-image-container {
  border: 1px solid green;
  padding: 0;
  margin: 0;
  min-height: 11rem;
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p/*, .card-content .image-container*/ {
  flex: 1 0 auto;
  border: 1px solid red;
}

.partner-card-content img.third-image {
  height: 5.5rem !important;
}


/*
p {
  font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/

.primary-button { /* ADDED */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<div class="partner-cards">

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x100" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="primary-button" href="#">View ABC Offer</a>
    </div>
  </div>
</div>

请注意，您必须添加min-width: 0 to partner-card-content to override默认值min-width: auto中的 Flexbox 设置柔性轴。您可以在下面看到此行为的一些示例：

  • Flexbox 影响溢出换行行为 https://stackoverflow.com/questions/52277368/flexbox-affects-overflow-wrap-behavior/52278099#52278099

  • Flexbox 调整大小和可滚动溢出 https://stackoverflow.com/questions/55303538/flexbox-resize-and-scrollable-overflow/55303600#55303600

  • 为什么弹性项目不会缩小到超过内容大小？ https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size

CSS 网格场景

您可以使用不同的方式来执行此操作CSS Grid Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout- 举个例子，考虑 3 张卡片排成一排。这works为您每个人的动态身高卡部分- 请参阅下面的演示：

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: column;
  grid-column-gap: 10px;
}

.partner-card, .partner-card-content {
  display: contents;
}

.partner-card-content .partner-image-container {
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p {
  border: 1px solid red;
  margin: 0;
}

.partner-card-content a {
  border: 1px solid;
}
<div class="partner-cards">
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>
</div>

但同样它也有局限性，因为你无法控制你的布局- 你无法控制你的cards但你正在致力于卡片内容在这里这不是很有用。请注意，我已经使用了display: contents https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents为了partner-card and partner-card-content元素。什么时候sub-grids https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid实施后，我们将有一个complete此类布局的解决方案 - 也请参阅下面的讨论：

  • 使用自动放置来包裹 CSS 网格 https://stackoverflow.com/questions/54949448/wrap-css-grid-with-auto-placement/54950223#54950223
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

相邻弹性盒容器中的内容垂直对齐 的相关文章

随机推荐

  • 使用现有绘图创建闪亮的下拉菜单

    我对 R 很陌生 所以这可能是非常明显的 但我真的被困住了 我已经创建了五个现有的绘图图表 我希望能够从下拉列表中选择闪亮的它们 我无法使现有图表名称和下拉列表之间的链接正常工作 我最近的尝试 不起作用 ui lt shinyUI flui

  • 删除百分比轴中的小数 - R [重复]

    这个问题在这里已经有答案了 我有一个图 我需要从百分比数字中删除小数 数据已经四舍五入 两位小数 数据示例 gt head df X 1 0 05 0 28 0 08 0 19 0 33 然后我用它来绘制它scale x continuou

  • Java 版本号的正则表达式

    我有一个正则表达式如下 d d d 它将字符串验证为 1 0 0 软件版本 我如何编辑它才能使以下字符串也有效 1 0 0 SNAPSHOT 1 0 0 RC 1 0 0 RELEASE 版本号后面可以跟有字母数字字符串 但前提是有 or

  • 更改循环位置时的 tJavaFlex 行为

    工作中遇到一些问题 我怀疑是因为对tJavaFlex缺乏了解 我在此测试作业中生成 10 行 并在 tJavaFlex 内生成循环 因此有 10 行进入 并且 开始 和 结束 部分中有一个循环 我预计每输入一行 都会生成 10 个相同的行

  • 如何使用我现有的 Web 项目实现数字签名

    我正在开发一个项目 用户需要对文档进行数字签名 我检查了谷歌并了解 sinadura 这是一个桌面应用程序 但我需要将其调用到我的网络应用程序中 我在 Linux 服务器上安装了 alfresco 社区版 https www alfresc

  • ViewPager PageTransformer 与支持库 v13

    我的应用程序使用Android的ViewPager和FragmentStatePagerAdapter 它只需要支持Android 4 x或更高版本 我正在为 ViewPager 使用 v13 支持库 所以我不需要处理 SupportFra

  • UITabBar 背景图像的图像缩放

    我在我的应用程序中创建了 UITabBarController Then in viewDidLoad 我想更改 UITabBar 背景图像 这是我试图使其工作的代码 class MainTabBarController UITabBarC

  • Angular 路由器：忽略路径参数中的斜杠

    我有动态路线could参数内包含斜杠或反斜杠 例如 http localhost 4200 dashboard T64 27D我应该导航到带有路线的页面T64 27D 这是我的导航方式this router navigate dashboa

  • 使用 React 前端和 Rails 后端的带有 google calendar api 的客户端 OAuth

    所以我试图做 google oauth 来为我的用户获取刷新令牌 实际上并没有使用 google oauth 来保存用户 当我使用客户端 OAuth 进行 google api 时 一切正常 但当您进行握手时 它们不提供刷新令牌 仅提供 a

  • Swift 不支持 SDK“iPhoneSimulator8.4.sdk”

    刚刚更新到 Xcode 7 0 1 在 El Capitan GM 上运行且禁用了 SIP 现在每次我尝试编译 Swift 项目时都会收到此错误

  • Lua：“拖动”数组中的元素序列

    我正在尝试创建一个函数 将连续数量的元素 拖动 到数组中的新位置 并限制为数组的当前大小 其他项目应该围绕 拖动 的项目晃动 例如 如果我的数组有 7 个元素 并且我想拖动中间的三个 1 2 3 4 5 6 7 lt keys a b C

  • 如何使用Watin / IE9测试文件下载？

    我正在尝试使用 Watin 2 1 0 针对 IE9 测试文件下载 我使用了问题已接受答案中的建议代码在 IE9 中使用 Watin 下载文件 https stackoverflow com questions 6125285 downlo

  • 在 Hadoop MapReduce 中解析 PDF 文件

    我必须在 Hadoop 的 MapReduce 程序中解析 HDFS 中的 PDF 文件 所以我从 HDFS 获取 PDF 文件为输入分割它必须被解析并发送到 Mapper 类 为了实现这个输入格式我已经经历过这个link http cod

  • 属性错误“模块”对象没有属性“DateField”

    我试图在 Satchmo Django 中扩展管理定义 并在尝试向 ProductOptions 添加 formfield override 时收到错误 属性错误 模块 对象没有属性 DateField from django contri

  • quartz 默认线程数是多少

    我是新来的Quartz 我确实设法弄清楚调度程序配置的默认值是org quartz threadPool threadCount 1 但它没有在任何地方找到这意味着什么 这是否意味着只有一个线程或者有其他 数字 我正在使用quartz sc

  • 如何使用蓝图将 Flasgger 与 Flask 应用程序结合使用？

    我正在使用以下命令将 Swagger UI 添加到我的 Python Flask 应用程序中Flasgger https github com rochacbruno flasgger 互联网上最常见的示例是使用基本 Flask 风格 ap

  • 使用 VS2017 启动 asp.net core 应用程序会创建新的应用程序池

    每次当我在 VS2017 的本地 IIS 下启动 ASP net Core 应用程序的调试器时 都会创建一个新的应用程序池 我希望应用程序在 DefaultAppPool 身份 下保持稳定 而不是创建新的应用程序 这个设置在哪里会影响这个

  • Laravel 查询带有“if”条件？

    我正在尝试使用 Laravel 4 制作高级搜索表单 这是查询 result DB table users ads gt join ads users ads ad id ads id gt orderBy column method gt

  • JavaScript 通过引用与通过值 [重复]

    这个问题在这里已经有答案了 我正在寻找一些很好的综合阅读材料 了解 JavaScript 何时按值传递内容 何时通过引用传递内容 何时修改传递的项目影响函数外部的值以及何时不影响函数外部的值 我还感兴趣的是 何时通过引用与通过值分配给另一个

  • 相邻弹性盒容器中的内容垂直对齐

    我有多个项目说卡片 这些卡片需要水平堆叠 并且高度需要相同 这正在发生在我身上 每张卡片都有图像 文本和按钮 每张卡片的图像和文本应采用任何卡片的最大高度 以便它们正确对齐 这不会发生在我身上 如果图像和文本正确对齐 则按钮将始终在底部的每

热门标签