时间戳

首页 > 解决方案 > 陷入 CSS 挑战

html - 陷入 CSS 挑战

问题描述

好吧，所以我被困在前端挑战赛上，特别是统计预览卡组件。

我正在尝试获取 div stats-div 中的文本并将其移至给定各种类的 h2 下方。

这是我目前的设置。 目前撰写

这是我的代码。

body {
  background-color: hsl(233, 47%, 7%);
}

.card {
  background-color: hsl(244, 38%, 16%);
  border-radius: 7px;
  border-style: hidden;
  height: 30vh;
  margin: 100px 75px 75px 75px;
}

h1 {
  color: white;
  font-family: lexend deca;
  margin: 100px 0 0 50px;
}

.insights {
  color: hsl(277, 64%, 61%);
}

p {
  color: hsla(0, 0%, 100%, 0.75);
  font-family: inter;
  font-size: 13px;
  line-height: 175%;
  margin: 25px 0 0 50px;
  text-align: left;
  width: 40%;
}

.right-image {
  float: right;
  height: 100%;
  margin: 0;
  object-fit: cover;
  width: 42%;
}

.stats-div {
  display: flex;
  margin: 25px 0 0 50px;
}

.companies-number, .templates-number, .queries-number {
  margin: 0;
  width: 10%;
  clear: both;
  color: white;
  font-family: lexend deca;
  flex: 1;
}

.stats {
  margin: 0;
}
<body>
    <div class="card">
      <img src="images/image-header-desktop.jpg" alt="girls interacting with technology gleefully" class="right-image">
      <h1>Get <span class="insights">insights</span> that help your business grow.</h1>

      <p> Discover the benefits of data analytics and make better decisions regarding revenue, customer
        experience, and overall efficiency.</p>

      <div class="stats-div">
        <h2 class="companies-number">
          10k+</h2>

        <p class="stats">companies</p>
        <h2 class="templates-number">314</h2>
        <p class="stats">templates</p>
        <h2 class="queries-number">12m+</h2>
        <p class="stats">queries</p>
      </div>
      <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
        Coded by <a href="#">Your Name Here</a>.
      </div>
    </div>
  </body>

这是该卡的外观： 目标设计

如果我的代码被正确使用，我特别感兴趣。我对 css 很陌生（因此是初学者级别的挑战）。

标签： htmlcss

解决方案

您可以将每一对h2和包装p.stats在一个封闭的div

.card {
  background-color: hsl(244, 38%, 16%);
  border-radius: 7px;
  padding: 25px;
}

.stats-div {
  display: flex;
  color: white;
}

.stats-div-item {
  flex: 1 1 calc(100%/3);
}
<div class="card">
  <div class="stats-div">
    <div class="stats-div-item">
      <h2>10k+</h2>
      <p>companies</p>
    </div>
    <div class="stats-div-item">
      <h2>314</h2>
      <p>templates</p>
    </div>
    <div class="stats-div-item">
      <h2>12m+</h2>
      <p>queries</p>
    </div>
  </div>
</div>

有了额外的 div，另一种方法是使用 css 网格。

.card {
  background-color: hsl(244, 38%, 16%);
  border-radius: 7px;
  padding: 25px;
  color: white;
}

.stats-div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
<div class="card">
  <div class="stats-div">
    <div>
      <h2>10k+</h2>
      <p>companies</p>
    </div>
    <div>
      <h2>314</h2>
      <p>templates</p>
    </div>
    <div>
      <h2>12m+</h2>
      <p>queries</p>
    </div>
  </div>
</div>

此外，这可能在不使用 css 列更改初始 html 的情况下是可能的。

.stats-div {
  columns: 3;
}

.stats-div>h2 {
  margin-top: 0
}
<div class="stats-div">
  <h2>10k+</h2>
  <p>companies</p>
  <h2>314</h2>
  <p>templates</p>
  <h2>12m+</h2>
  <p>queries</p>
</div>

推荐阅读