如何让这些柱子具有相同的高度？

Question

顶部图像是媒体查询开始的地方，底部图像是放大分辨率的地方。随着分辨率变宽，图像将扩展到其容器。当媒体查询开始时，有什么办法可以让它完全展开（与左侧的卡片内容高度相同）？

CSS：

@media (min-width:700px) {

    .card {
        grid-template-columns: 1fr 1fr;
    }

    .card-image {
        order: 2;
    }

    .card-content {
        order: 1;
        text-align: left;
    }

    .flex-group {
        flex-direction: row;
    }
}

Answer 1

请看下面这个问题的代码片段，我相信你可以修改你的代码:)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: hsl(233, 47%, 7%);
  font-size: 16px;
  font-family: "Inter";
}
.container {
  background-color: hsl(244, 38%, 16%);
  width: 300px;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 10px;
}
/*IMAGE SECTION STYLES*/
.img-section {
  border-radius: inherit;
  position: relative;
}
.img--overlay {
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  height: 98.5%;
  background-color: hsla(277, 70%, 60%, 0.401);
  top: 0;
}
img {
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 100%;
  height: 100%;
}

/*STATISTICS BOX-STYLES*/
.stat-box {
  text-align: center;
  padding: 0 32px 0;
}
.stat-box-title {
  color: hsl(0, 0%, 100%);
  font-family: "Inter";
  font-size: 24px;
  margin-bottom: 16px;
}
h2 span {
  color: hsl(277, 64%, 61%);
}
.stat-box-desc {
  color: hsla(0, 0%, 100%, 0.75);
  font-family: "Lexend Deca";
  font-weight: 400;
  margin-bottom: 48px;
  line-height: 1.5;
}
.stat-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.stat-member:last-child {
  margin-bottom: 32px;
}
.stat-number {
  color: hsl(0, 0%, 100%);
  font-family: "Inter";
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.stat-name {
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 12px;
  font-family: "Lexend Deca";
}

/*MEDIA QUERY FOR DESKTOP*/
@media (min-width: 830px) {
  .container {
    margin: 200px auto;
    width: 800px;
    flex-direction: row-reverse;
    gap: 0;
  }
  .stat-box {
    flex: 0 1 400px;
    padding: 42px 48px 0;
    text-align: left;
  }
  .img-section {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex: 0 1 400px;
  }
  img {
    border-radius: inherit;
    width: 100%;
  }
  .img--overlay {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
  }
  .stat-container {
    flex-direction: row;
    gap: 24px;
  }
  .stat-box-desc {
    font-size: 12px;
  }
  .stat-number {
    font-size: 15px;
  }
  .stat-name {
    font-size: 10px;
  }
  .stat-member:last-child {
    margin-bottom: 0;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap"
      rel="stylesheet"
    />
    <title>Frontend Mentor | Stats preview card component</title>
  </head>
  <body>
    <div class="container">
      <div class="img-section">
        <img src="https://github.com/si88har1h/stats-preview-card-component/blob/main/images/image-header-desktop.jpg?raw=true" alt="" />
        <div class="img--overlay"></div>
      </div>
      <div class="stat-box">
        <h2 class="stat-box-title">
          Get <span>insights</span> that help your business grow.
        </h2>
        <p class="stat-box-desc">
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall effeciency.
        </p>
        <div class="stat-container">
          <div class="stat-member">
            <p class="stat-number">10k+</p>
            <p class="stat-name">COMPANIES</p>
          </div>
          <div class="stat-member">
            <p class="stat-number">314</p>
            <p class="stat-name">TEMPLATES</p>
          </div>
          <div class="stat-member">
            <p class="stat-number">12M+</p>
            <p class="stat-name">QUERIES</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

如何让这些柱子具有相同的高度？

问题描述投票：0回答：1

1个回答

最新问题

如何让这些柱子具有相同的高度？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1