html 如何在CSS中固定卡片的大小

vdzxcuhz 于 2023-02-17 发布在其他

关注(0)|答案(3)|浏览(219)

我想使卡的大小是相同的，无论文本大小。如果我给更多的文本数量，卡是扩大。但我想为卡的固定大小。空白的文本数量少是我所期望的。我已经尝试了这段代码，但它不是期待。
CSS：

@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  background-color: #eee;
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 93vh;
}

.grid {
  display: grid;
  width: 104em;
  grid-gap: 6rem;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  align-items: start;
}

.grid-item {
  background-color: #fff;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.2s;
}

.grid-item:hover {
  transform: translateY(-0.5%);
  box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card-img {
  display: block;

  object-fit: cover;
  width: 300px;
  height: 300px;
}

.card-content {
  padding: 2rem;
}

.card-header {
  font-size: 2rem;
  font-weight: 500;
  color: #0d0d0d;
  margin-bottom: 1.5rem;
}

.card-text {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.25;
  color: #3d3d3d;
  margin-bottom: 2rem;
}

.card-btn {
  display: block;
  width: 100%;
  padding: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
  color: #3363ff;
  background-color: #d8e0fd;
  border: none;
  border-radius: 0.4rem;
  transition: 0.2s;
  cursor: pointer;
  letter-spacing: 0.1rem;
}

.card-btn span {
  margin-left: 1rem;
  transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
  background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
  margin-left: 1.5rem;
}

@media only screen and (max-width: 60em) {
  body {
    padding: 2rem;
  }

  .grid {
    grid-gap: 2rem;
  }
}

超文本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webIQ</title>

    <link rel="stylesheet" href="home.component.css" />
  </head>

  <body>
    <div class="grid">
      <div class="grid-item">
        <div class="card">
          <div class="card-content">
            <h1 class="card-header">Catalog</h1>
            <p class="card-text">
              Catalog helps us to manage our data assets with information such as location, structure, quality, and relationships, which makes it easier for data users to find and understand the data you need.
            </p> 
              <button type="button" class="card-btn" >Visit <span>&rarr;</span></button>
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="card">
          <div class="card-content">
            <h1 class="card-header">Data Portal</h1>
            <p class="card-text">
              Data Portal is a section of our system where you can access details about databases, tables, location, schema, access history, and metadata. Additionally, you can manage access to the tables, including enabling, renewing, and revoking access.
            </p>
            <button class="card-btn">Visit <span>&rarr;</span></button>
          </div>
        </div>
      </div>
      <div class="grid-item">
        <div class="card">
          <div class="card-content">
            <h1 class="card-header">Canary Access</h1>
            <p class="card-text">
              Canary Access will give the details about the pending, granted requests details.
            </p>
            <button class="card-btn">Visit <span>&rarr;</span></button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Html

来源：https://stackoverflow.com/questions/75445785/how-to-fix-the-size-of-cards-in-css

3条答案

按热度按时间

f87krz0w1#

您可以添加最大高度|每个容器/卡片的最大宽度，并防止盒子在里面有更多内容物时溢出。

赞(0）回复(0）举报 2023-02-17

kognpnkq2#

在card-text类中使用此CSS。
此外，您可以使用width属性来固定卡的宽度。

.card-text {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.25;
  color: #3d3d3d;
  margin-bottom: 2rem;
  height:200px;
}

赞(0）回复(0）举报 2023-02-17

lvjbypge3#

您可以为每个.grid-item、.card和.card-content指定一个height: 100%值，以便所有卡的高度相同。
现在对于white-space，使用列方向的flexbox作为卡片内容，并将card-btn的margin-top值设置为auto，以便按钮始终位于底部。
此外，请确保默认情况下对所有元素使用box-sizing: border-box，以便正确布局所有元素。

更新小提琴：

@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  background-color: #eee;
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 93vh;
}

.grid {
  display: grid;
  width: 104em;
  grid-gap: 6rem;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  align-items: start;
}

.grid-item {
  background-color: #fff;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.2s;
  height: 100%;
}

.grid-item:hover {
  transform: translateY(-0.5%);
  box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card {
  height: 100%;
}

.card-img {
  display: block;
  object-fit: cover;
  width: 300px;
  height: 300px;
}

.card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  font-size: 2rem;
  font-weight: 500;
  color: #0d0d0d;
  margin-bottom: 1.5rem;
}

.card-text {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.25;
  color: #3d3d3d;
  margin-bottom: 2rem;
}

.card-btn {
  display: block;
  width: 100%;
  padding: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
  color: #3363ff;
  background-color: #d8e0fd;
  border: none;
  border-radius: 0.4rem;
  transition: 0.2s;
  cursor: pointer;
  letter-spacing: 0.1rem;
  margin-top: auto;
}

.card-btn span {
  margin-left: 1rem;
  transition: 0.2s;
}

.card-btn:hover,
.card-btn:active {
  background-color: #c2cffc;
}

.card-btn:hover span,
.card-btn:active span {
  margin-left: 1.5rem;
}

@media only screen and (max-width: 60em) {
  body {
    padding: 2rem;
  }
  .grid {
    grid-gap: 2rem;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>webIQ</title>

  <link rel="stylesheet" href="home.component.css" />
</head>

<body>
  <div class="grid">
    <div class="grid-item">
      <div class="card">
        <div class="card-content">
          <h1 class="card-header">Catalog</h1>
          <p class="card-text">
            Catalog helps us to manage our data assets with information such as location, structure, quality, and relationships, which makes it easier for data users to find and understand the data you need.
          </p>
          <button type="button" class="card-btn">Visit <span>&rarr;</span></button>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <div class="card-content">
          <h1 class="card-header">Data Portal</h1>
          <p class="card-text">
            Data Portal is a section of our system where you can access details about databases, tables, location, schema, access history, and metadata. Additionally, you can manage access to the tables, including enabling, renewing, and revoking access.
          </p>
          <button class="card-btn">Visit <span>&rarr;</span></button>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="card">
        <div class="card-content">
          <h1 class="card-header">Canary Access</h1>
          <p class="card-text">
            Canary Access will give the details about the pending, granted requests details.
          </p>
          <button class="card-btn">Visit <span>&rarr;</span></button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-02-17

我来回答

html 如何在CSS中固定卡片的大小

3条答案

相关问题

热门标签

最新问答