我正在做一個網頁，上面顯示了一個應用程序的一些統計數據。我想使用CSS grid將統計數據分成四列，左邊是一個圖像，右邊是三個文本項。我還想在列之間添加垂直線，以便在視覺上將其分開。我為此寫了一些HTML和CSS代碼，但是我沒有得到我想要的結果。我該如何解決這個問題？以下是我的代碼:

Html代碼:

<div class="stats__number">
          <img
            src="img/d4d-3d.png"
            alt="3D logo of D4D Offers app in middleeast"
            class="stats__number_img"
          />
          <img
            src="img/download.svg"
            alt=""
            class="stats__number_svg download_svg vertical_line"
          />
          <span class="stats__number_text download_text vertical_line">
            <span class="stats__number_text_main color_primary">6 M+</span
            >Downloads</span
          >
          <img
            src="img/star.svg"
            alt=""
            class="stats__number_svg star_svg vertical_line"
          />
          <span class="stats__number_text star_text vertical_line">
            <span class="stats__number_text_main">4.5</span>Star Rating
          </span>
          <img
            src="img/review.svg"
            alt=""
            class="stats__number_svg review_svg vertical_line"
          />
          <span class="stats__number_text review_text vertical_line">
            <span class="stats__number_text_main">87 K+</span>Reviews
          </span>
        </div>

CSS代碼:

.stats { 
     grid-column: full-start/full-end; 
     padding: 10% 15%; 
     position: relative; 
    }
    .stats__img {
      position: absolute;
      left: -13%;
      top: 16%;
      width: 26%;
     }
    
    .stats__number {
      display: grid;
      place-items: center center;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 10rem);
     }
    .stats__number_img {
      position: relative;
      top: -10%;
      height: 25rem;
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      justify-self: end;
     }
    .stats__number_svg {
      height: 7rem;
      width: 7rem;
    }
    .stats__number_svg.star_svg {
      width: 16rem;
      height: 16rem;
      filter: none;
    }
    .stats__number_svg.review_svg {
      width: 9rem;
      height: 9rem;
      filter: none;
    }
    .stats__number_text {
     font-size: 1.6rem;
     font-weight: 700;
     text-align: center;
     line-height: 1.6;
    }
    .stats__number_text_main {
      font-weight: 700;
      font-size: 2.4rem;
      display: block;
    }
    .stats__number_text.download_text {
      grid-column: 2/3;
      grid-row: 2/3;
    }
    .stats__number_text.star_text {
      grid-column:3/4; 
      grid-row:2/3; 
    }
    .stats__number_text.review_text { 
      grid-column:4/5; 
      grid-row:2/3; 
    }

這就是我試圖用這段代碼實現的目標。感謝任何幫助。 我期待實現的目標 這是我用上面的代碼實現的

您可以使用語義正確的標記HR并用CSS對其進行樣式化(工作演示):

<div class="stats">
  <div class="stats__number">
      <img
        src="img/d4d-3d.png"
        alt="3D logo of D4D Offers app in middleeast"
        class="stats__number_img"
      />
<hr class="vertical spliter-1"/>
      <img
        src="img/download.svg"
        alt=""
        class="stats__number_svg download_svg vertical_line"
      />
      <span class="stats__number_text download_text vertical_line">
        <span class="stats__number_text_main color_primary">6 M+</span
        >Downloads</span
      >
<hr class="vertical spliter-2"/>
      <img
        src="img/star.svg"
        alt=""
        class="stats__number_svg star_svg vertical_line"
      />
      <span class="stats__number_text star_text vertical_line">
        <span class="stats__number_text_main">4.5</span>Star Rating
      </span>
<hr class="vertical spliter-3"/>
      <img
        src="img/review.svg"
        alt=""
        class="stats__number_svg review_svg vertical_line"
      />
      <span class="stats__number_text review_text vertical_line">
        <span class="stats__number_text_main">87 K+</span>Reviews
      </span>
    </div>
</div>

將以下內容添加到您的CSS中，并根據您的需要進行調整。你可以添加一些陰影，淡出等等:

hr.vertical {
  height: 50%;
  width: 0;
  border: 1px solid black;
}

.spliter-1 {
  position: absolute; 
  left: 38%;
}
.spliter-2 {
  position: absolute;
  left: 50%;
}
.spliter-3 {
  position: absolute; 
  left: 70%;
}