Застрял На Задаче CSS

#html #css

Вопрос:

Хорошо, итак, я застрял на задаче переднего плана, в частности, на компоненте карты предварительного просмотра статистики.

Я пытаюсь взять текст, который находится в статистике div-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 (отсюда и задача начального уровня).

Ответ №1:

Вы могли бы завернуть каждую пару 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>

Кроме того, это может быть возможно без изменения исходного html с помощью столбцов css.

 .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>