как сделать разметку как на картинке?

Question

.profile {
}

.stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
}

li {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(203, 203, 203);
}

<div class="profile">
  <ul class="stats">
    <li>
      <spa>followers</spa>
      <spa>1234</spa>
    </li>
    <li>
      <spa>Views</spa>
      <spa>1234</spa>
    </li>
    <li>
      <spa>Likes</spa>
      <spa>1234</spa>
    </li>
  </ul>
</div>

Answer 1

.stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  background-color: #F4F6F9;
  padding-left: 0;
  border-radius: 0 0 1rem 1rem;
  border: 1px solid rgb(203, 203, 203);
}

.stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 0;
  flex-grow: 1;
  padding: 1rem;
}

.stats li+li {
  border-left: 1px solid rgb(203, 203, 203);
}

<div class="profile">
  <ul class="stats">
    <li>
      <span>followers</span>
      <span>1234</span>
    </li>
    <li>
      <span>Views</span>
      <span>1234</span>
    </li>
    <li>
      <span>Likes</span>
      <span>1234</span>
    </li>
  </ul>
</div>

БЛОГ НА HUSL

как сделать разметку как на картинке?

Ответы (1 шт):