css中不等的卡片大小答案

【问题标题】：Unequal Card size in csscss中不等的卡片大小
【发布时间】：2020-03-27 05:48:12
【问题描述】：

我在反应中有卡片轮播。卡片会根据内容增加其高度。这是我的代码。


 <Slider {...carouselCardProps} ref={(node: any) => (carouselCardContainer = node)} >
                {gameNewsData &&
                  gameNewsData.map(data => (
                    <NewsItem
                      gameData={data}
                      skeletonLoading={false}
                    ></NewsItem>
                  ))}        
</Slider>
<RightOutlined className="cxe-right-arrow" onClick={() => carouselCardContainer.slickNext()} />

newsITem 组件

 <div className="cxe-news-card">
        <div className="cxe-news-item-header">
            <div className="cxe-news-avatar ">
              <img alt="avatar" src={gameData.source.page.page_logo.url} />
            </div>
            <div className="cxe-news-content">
              <span>{gameData.source.name}</span>
              <span>
                {moment
                  .unix(gameData.created_at)
                  .format("MM/DD/YYYY  hh:mm:ss")}
              </span>
            </div>
        </div>
        <div className="cxe-new-section">        
          <img alt="newsItem" src="https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png"/>
          <div className="cxe-news-content-container">      
              <h3 className="cxe-news-heading">{gameData.title}</h3>
              <p className="cxe-news-content-details">{gameData.summary}</p>
              <a className="cxe-read-more" href="/">Read More</a>
          </div>
        </div>
      </div>

如果 h3 有 2 行文本，那么卡片会变得不相等，我们该如何解决它

【问题讨论】：

标签： html css reactjs sass

【解决方案1】：

我认为你可以使用 flexbox 来获得相同的卡片高度。

.flex-container {
  display: flex;             
  flex-direction: row;
  align-items: stretch;
}

.flex-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

然后，您可以将“flex-container”应用于容器（使用 className cxe-new-section）并将“flex-item”应用于要显示为它的子项的所有项目。

【讨论】：