- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我有多个元素说卡片。这些卡片需要水平堆叠并且高度需要相同。这正在发生在我身上。
每张卡片都有图像、文本和按钮。每张卡片的图像和文本应采用任何卡片中的最大高度,以便它们正确对齐。这不会发生在我身上。
如果图像和文本正确对齐,则按钮将始终与底部的每张卡片对齐。
我一直在关注this tutorial但是我有多张卡片,这里只放了三张。第三张卡片图片的高度也是通过 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、文本和链接:
最佳答案
长话短说
在 CSS 中不可能对齐相邻 flexbox 中的 flexbox 元素。你真的需要 sub-grids
通过卡中各部分的动态大小来解决此问题。
Flexbox 场景
无论如何,鉴于您对 partner-image-container
有一个 min-height
,所以我想您可以有一个 min-height
设置为 a
或 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
添加到 partner-card-content
以覆盖默认 min-width: auto
flexbox 在 flex 轴 中的设置。您可以在下面看到此行为的一些示例:
CSS 网格场景
您可以使用 CSS Grid Layout
以不同的方式执行此操作- 例如,考虑连续放置 3 张卡片。这适用于每个卡片部分的动态高度 - 请参见下面的演示:
.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>
但它同样有局限性,因为您无法控制您的布局 - 您无法控制您的卡片,但您正在处理卡片的内容在这里这不是很有用。请注意,我使用了 display: contents
对于 partner-card
和 partner-card-content
元素。当sub-grids
实现后,我们将有一个完整解决方案来解决这样的布局问题 - 请参阅下面的讨论:
关于html - 相邻 flexbox 容器中内容的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55272962/
我想在数组中找到连接(相邻)的元素。 例如,在数组中: [1,2,3,4,5] 要访问所有 2 个连通元素,输出将为: 1,2 2,3 3,4 4,5 要访问所有 3 个连通元素,输出将为 1,2,3
我有三个 Sprite ,彼此堆叠在一起。 我修改了他们的 transform.matrix 以给出他们一致增长的外观。 但是,根据比例因子,瓷砖之间有时会出现小裂缝。 cracks between
我正在阅读有关 Margin Collapsing 的文章,我遇到了这个:margin Adjacent siblings The margins of adjacent siblings are c
float div 的框阴影被其右侧的邻居截断,但左侧未截断。 我玩过 z-index 和 overflow: visible,但没有用。 HTML: CSS: .doc-page {
我有多个元素说卡片。这些卡片需要水平堆叠并且高度需要相同。这正在发生在我身上。 每张卡片都有图像、文本和按钮。每张卡片的图像和文本应采用任何卡片中的最大高度,以便它们正确对齐。这不会发生在我身上。 如
我有这个 GUI 我使用了 GridBagLayout,但我不知道为什么 Plain Bread 复选框与其相应的标签之间有很大的间距。 而且,我尝试仅增加按钮沿 x 轴的间距,但尽管重置了插图,但沿
在过去,我已经为自定义元素符号使用了数百次列表项背景图像,但不知何故从未遇到过这个问题。 基本上,我有一个 IMG float 在无序列表的左侧。元素符号背景图像设置在每个 LI 的左上角。但是, f
我正在使用 Bootstrap 框架并使用 2 列网格。 html 内容有标题、链接、副标题和文本。这增加了该列的高度。我希望它旁边的列与其高度匹配(以便图像显示)没有设置高度图像不显
我有一个 php 代码可以生成数百个 和 标签。我的问题如下,我有以下内容: X X 我想要第二个的边框颜色更重要,以便共享边框显示为灰色而不是黑色。我可以在第二个 td 中使用重要性或继承标签吗?
Place holder for Radio1 Place holder for Radio2 在此,我只想要 与相应的单选按钮相关联是可见的,但是...... * { visibilit
我正在尝试在 html 中实现以下布局。更大的 div 1。然后是它旁边的另一个 div,顶部有一个边距。如果我给 float: left 给第一个 div,给第二个 div margin-top 也
假设我有 2 个名为 IN 和 MASK 的二进制输入。实际字段大小可能是 32 到 256 位,具体取决于用于完成任务的指令集。两个输入都会改变每次调用。 Inputs: IN = ...110
我想知道是否有一种简洁/一行的方法来执行以下操作: pack :: [a] -> [(a, a)] pack [] = [] pack [_] = [] pack (x:y:xs
下面的代码分为两部分,一部分处理头部的管理,另一部分处理“主体”,当我执行代码时引发下面的异常,我该如何解决该错误?我不知道下面的错误是什么原因造成的,错误是在react的解析上 错误: Line
http://imgur.com/a/DA5i4 在上面的两张图片中你可以看到我有一个主容器,里面装满了 3 个较小的 div,一个大的在中间,两个瘦的在两边,但是右边直到中间的 div 下面才开始。
正如我在标题中解释的所有内容,然后我将只为你们提供我现在拥有的代码,我一直在努力实现我想要的东西很长时间但没有运气......它表现得像响应式的,但即使调整大小我也想将其保持在原位...截图
我编写了一个 jquery 插件,它使用 Flot 将 HTML 表格转换为图表。 HTML 是从 XSLT 生成的,在 XSLT 中我有以下代码来调用我的插件。此代码尝试在 blah1 和 blah
我正在尝试实现这样的布局。 aaa xxxxxx oooo aaa xxxxxx oooo xxxxxx xxxxxx bbb xxxxxx cccc bbb xxxxxx cc
在包含网格的 2 个 div 上使用内联 css 显示不起作用 最佳答案 为您的 div 指定宽度并根据您的要求使用“float: left”或“right”。不要对 div 使用“内联” 例如 CS
我将 MVC 项目中的一些代码返回到网页。我无法用撇号解决问题,当我的电话看起来像这样时,我如何忽略它 document.getElementById('some').insertAdjacentHT
我是一名优秀的程序员,十分优秀!