如何在ant design carousel中不固定卡片的情况下使卡片具有相同的高度？

Question

无法使antd轮播内渲染的卡片高度相同

唯一有效的是固定卡片高度，这是一个坏主意，因为我事先不知道文本长度，卡片内将显示什么。 { 返回 （

{cards.map((卡) => (

))} ）； }

您有两个选项来设置轮播的大小。第一个（也是最简单的）是为轮播的卡片（或任何其他内容）设置固定大小：

<Carousel 
  ... props
>
  <Card
    style={{
      height: 300,
      ....
    }}
  >
    <p>test</p>
  </Card>
  ....

</ Carousel>

但正如你所说，你不想在卡片中设置静态高度，因此你需要转向 CSS 并覆盖一些类：

以下是类列表：

ant-carousel

、

slick-list

、

slick-track

以及

slick-slide

第一个 div 子级。

将它们全部设置为

height: 100% !important;

将解决您的问题。

这里是一个工作示例

Answer 1

您有两个选项来设置轮播的大小。第一个（也是最简单的）是为轮播的卡片（或任何其他内容）设置固定大小：

<Carousel 
  ... props
>
  <Card
    style={{
      height: 300,
      ....
    }}
  >
    <p>test</p>
  </Card>
  ....

</ Carousel>

但正如你所说，你不想在卡片中设置静态高度，因此你需要转向 CSS 并覆盖一些类：

以下是类列表：

ant-carousel

、

slick-list

、

slick-track

以及

slick-slide

第一个 div 子级。

将它们全部设置为

height: 100% !important;

将解决您的问题。

这里是一个工作示例