实现宽度相同但高度不同的css卡片

文章/答案/技术大牛

发布

0回答

css、materialize

我正在尝试构建一个屏幕，显示几张不同高度的卡片，但是一旦它们有不同的高度，它们就会像这样发送到最高的卡片的下面：我的结构很简单： <mainclass="col s12 m6 l4">CARD</div> <

浏览 7提问于2016-07-14得票数 1

回答已采纳

6回答

带角材料的Pinterest布局

html、css、angularjs、layout、material-design

我需要的下列布局，如果卡是从左到右插入，包装在可用宽度的末尾，并填写之间的任何垂直空间卡。所有卡片都有相同的宽度，但高度不同：这是可能的平原角和CSS？怎么做？我试着用display:flex实现这一点，但是我无法摆脱垂直空间： display: flex; justify-conte

浏览 12提问于2016-11-22得票数 12

回答已采纳

1回答

ionic中具有不同大小图像的卡片

css、ionic-framework、ionic

我正在使用卡片来显示图像。我连续显示了两到三张图片。一行中的图像数量可以更改。图像的大小是不同的。它们的高度和宽度不一样。正因为如此，卡片的高度也在变化。我希望所有的卡片都有相同的高度，即使图像大小不同。当我们拖动屏幕尺寸时，图像和卡片的高度和宽度<

浏览 1提问于2015-06-10得票数 4

回答已采纳

2回答

使用flexbox创建相同高度的卡片列表

html、twitter-bootstrap、flexbox

我正在试着做一个相同宽度和相同高度的卡片列表。我正在使用flex，bootstrap和一些adminlte行。我的问题是，当一些带有文本的标签比其他标签更大时，卡片的高度会改变以填充内容，并且它们会随着高度的不同而变化。这里是小提琴：<style> displ

浏览 0提问于2019-09-18得票数 0

1回答

带有角度材料的Google+ / Pinterest风格卡片布局

css、angularjs、angular-material

我试图建立一个卡片布局的角度材料，将允许卡片有一个可变的高度，并能够改变显示的列的数目，根据窗口的宽度。得到，几乎是，这是我正在寻找的，这是在这个中显示的，但是这里链接的例子不允许卡片有一个动态的高度。几周前，我尝试过，但无法使它工作，我可能会再次尝试使用角砌体，但理想情况下，我希望在不使用额外的</e

浏览 3提问于2015-12-06得票数 1

1回答

在给定的高度和宽度只播放图像的中心？

html、css、image-processing

当媒体呈现一张显示博客帖子的卡片列表时，每一张卡片都会显示标题图像，并且是完全宽度的，但是它的中心已经被剪掉了。要做到这一点，请将每幅图像的顶部和底部剪掉，这样它们的大小都相同：是否可以对纯CSS进行同样的处理。它必须适用于不同大小的图像。例如，一幅图像的高度可以是500 at，另一幅是1000 at，宽度相

浏览 6提问于2020-03-26得票数 1

回答已采纳

6回答

引导4卡甲板表-单元列响应基于视口？

css、twitter-bootstrap、responsive-design、twitter-bootstrap-4、bootstrap-4

因此，在Bootstrap v4中，我看到了卡片甲板( )的一个新特性，它使一组卡片的高度与组中最高的内容相等。目前，它们保持相同数量的列/卡宽度，直到小于544 of。在544 At和更高的</e

浏览 14提问于2016-04-07得票数 15

1回答

如何在IE中获得角度材料设计的“md-卡”指令，以适当地缩放图像？

css、angularjs、material-design、angular-material

我已经把它作为一个发布在站点中，但是我想在这里发布这个，以防有一个基于CSS的解决方案，我应该知道。我试图创建一个“砖石布局”，在这里我有多列不同尺寸的图像。我试图用卡片来保存每一张图片，而在Chrome和Firefox中，它的工作原理与我所期望的完全一样。卡片缩放到窗口(使用flex)，图像缩放匹配卡片的大小。然而，在IE11上，卡的高度似乎与图像的实际<em

浏览 1提问于2014-11-25得票数 29

回答已采纳

1回答

当我拖动一个对象CSS/JavaScript/AngularJS时，为css类赋值

javascript、css、angularjs

我用列表和卡片创建了一个项目。我使用这个指令拖放。当我把一张卡片拖到另一张名单上，在我放下她之前。是在我拿着卡片的地方创建的。<li class="DnDPlaceHolder"></li> 我在css word-wrap: break-word;中使用，那么所有卡中的高度li都是不同的(<

浏览 4提问于2017-09-26得票数 0

1回答

引导4:相同高度和宽度的网卡

html、css、twitter-bootstrap、bootstrap-4

我试着在一个高度和宽度相同的格子里订购卡片。这些卡片将有不同的内容，不同的大小。他们还应该在每一行3。每一行都有不同的高度是可以的，但是行内的高度应该是相同的。每个卡片的宽度对于整个网格应该是相同

浏览 0提问于2018-02-06得票数 15

回答已采纳

1回答

角2-基于包含图像的子div高度调整父div的高度

jquery、css、angular

获取的html的结构如下： <div class="wrapper"> <img</div> 获取的html块包含几个相同的容器div，其结构与上面相同，但是图像可以是不同大小的<

浏览 0提问于2016-04-19得票数 0

1回答

仅调整CardView的高度也会更改宽度

android、animation、cardview

我目前有一个回收器视图，其中包含CardViews的列表。当我单击卡片时，我希望能够展开卡片(仅更改高度)。通过设置带有动画的卡片的新高度，这可以很好地工作。问题是，当我单击展开卡片时，宽度也缩小到不到屏幕宽度的一半。如果我滚动视图离开并返回，宽度设置是正确的。每次我尝试扩大高度时，它都会扩展到合适的大小，但<

浏览 14提问于2019-10-20得票数 0

3回答

具有相同高度的嵌套项目的嵌套flexbox

css、flexbox

我正在尝试实现一个卡片模式(类似于)，利用flexbox进行布局。每个卡片都有一个标题和一个内容，并使用flexbox对它们进行排列。卡片的高度已经一致，这要归功于外部的<

浏览 2提问于2016-05-10得票数 1

1回答

如何在bootstrap 4.4中对齐卡片图像，使所有的卡片具有相同的宽度和高度。

css、django、python-3.x、bootstrap-4

所以基本上在用Django和bootstrap 4.4做一个简单的网站时，我想到了这个问题。我使用“卡片”以网格格式添加图书图像，就像在书店web应用程序中一样。但这些卡片的尺寸并不相等。如何在bootstrap 4.4中对齐卡片图像，使所有卡片具有相同的宽度和高度，同时保持对窗口大小更改的响应。我的问题如下图所示。如你所见，卡片的</

浏览 4提问于2020-03-24得票数 0

1回答

对齐列- Flexbox

javascript、html、css、flexbox、zurb-foundation

我目前使用的是从基金会构建的XY网格中的grid-x，尽管当我使用grid-padding-x进行卡片布局(如下所示)时，可以看到卡片居中(这很棒)，尽管我想在上面放置一个排序栏，但将其与下面的卡片布局对齐被证明是困难的，因为卡片布局会相应地进行调整。我希望在jsfiddle中显示的是固定宽度和高度的卡片，并自动居中(通过使用grid-padding实现<

浏览 1提问于2017-09-19得票数 0

1回答

缩放文本以适应其容器大小

css、vue.js

这些卡片包含一些我放在卡片里的文本。这些卡片构成了一个完整的部分，并且应该都有相同的高度。我可以使用max-height和@media和屏幕宽度来缩放文本，但这意味着我将为文本设置5-6个@media规则，手动缩放它以使容器保持相同的高度。我试过使用不同的字体大小规则，如clamp，calc，vw和line-clamp (它确实

浏览 24提问于2021-04-15得票数 0

1回答

设计通用的卡片组

oop

如何设计一个通用的卡片组。这副牌可以包括魔术牌、uno牌和常规扑克牌。我应该使用哪些类、方法和属性？

浏览 0提问于2016-11-15得票数 0

2回答

元素中的文本元素。

javascript、css、flexbox

对我来说，在没有图像的情况下，描述我想做的事情有点困难：一些背景-是我不能改变或不想改变的东西：我用这个卡片布局我的博客头版。卡的宽度由javascript计算(根据不同的屏幕宽度)，因此CSS不知道，它的高度等于宽度(我希望卡片是一个平方)，图像的比例总是16:9。在内容区域，标题没有包装，页脚

浏览 2提问于2019-12-08得票数 0

3回答

需要内容增长到相同的高度

css、angularjs、flexbox、angularjs-material、md-card

我正在使用AngularJS材料，并且遇到了一个问题，试图使md-card达到相同的高度。在屏幕上，卡片的高度是相同的，但我真的只想让内容部分增长以填充空闲空间。下面你可以看到我的卡片是相同的高度，但我希望我的图像和图像标题保持不变，而下面的一切都会增长以适应最大的高度：我的卡片代码如下所示：

浏览 41提问于2018-01-26得票数 2

回答已采纳

1回答

Bootstrap 4卡图像不对齐

html、css、twitter-bootstrap、image

所以我创建了一个非bootstrap类，名为services.Inside它有3张相同分辨率(225x225px)的bootstrap 4卡，然后将它的样式指定为display：.I，这样它们就对齐了，我尝试对它们使用相同的宽度和高度属性，但它没有使用img work.Neither rem属性。html.png" class="card-img-top" alt="HTML"> </div

浏览 0提问于2019-08-04得票数 0

点击加载更多