如何在CSS中使卡片高度相等?[复制]

e7arh2l6  于 2023-04-13  发布在  其他
关注(0)|答案(3)|浏览(122)

此问题已在此处有答案

CSS - Equal Height Columns?(11个回答)
关闭2天前.

<div className={Styles.didslider}>
        <Slider {...settings}>
          {CardData.map((data, index) => (
            <div className={Styles.didslidecard} key={index}>
              <DidyouknowCard
                iconimage={data.iconimage}
                title={data.title}
                description={data.description}
              />
            </div>
          ))}
        </Slider>
      </div>

我需要的didyouknowcard在相同的高度如何做到不给静态的宽度和高度的基础上动态内容的高度需要匹配?

dxxyhpgq

dxxyhpgq1#

可以在css文件中为card的div类使用min-height:...属性

iq3niunx

iq3niunx2#

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  padding: 20px;
  margin-bottom: 20px;
  flex-basis: calc(33.33% - 20px);
}
<div class="card-container">
  <div class="card">
    <h3>Card 1</h3>
    
  </div>
  <div class="card">
    <h3>Card 2</h3>
    
    
  </div>
  <div class="card">
    <h3>Card 3</h3>
    
  </div>
</div>
ego6inou

ego6inou3#

正如你所说,你不能使用弹性,尝试使用以下方法之一:
1.使用display: tabledisplay: table-cell属性显示表

.card-group {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px;
}

.card {
    display: table-cell;
    vertical-align: top;
    width: 33.33%;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
}
<div class="slider">
    <div class="card-group">
        <div class="card">
            <h1>Where was it consumed the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad adipisci architecto consequatur,
            corporis, cupiditate deleniti distinctio illo iste magni nihil odit officia porro quidem reiciendis
            reprehenderit similique voluptate voluptates.
        </div>
        <div class="card">
            <h1>Where was it eaten the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

1.使用display: gridgrid-template-columnsgrid-gap的网格显示:

.card-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.card {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
}
<div class="slider">
    <div class="card-group">
        <div class="card">
            <h1>Where was it consumed the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad adipisci architecto consequatur,
            corporis, cupiditate deleniti distinctio illo iste magni nihil odit officia porro quidem reiciendis
            reprehenderit similique voluptate voluptates.
        </div>
        <div class="card">
            <h1>Where was it eaten the most?</h1>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </div>
    </div>
</div>

他们都做同样的高度,但在不同的方式,看看什么方法会更好地在您的项目。

相关问题