0

Подскажите, как сверстать этот фрагмент?

Понимаю, что тут в основном списки, но их настолько много и расположены они некоторые нестандартно, и я не могу представить оптимальное решение

Буду благодарен любому подходу (что с чем объединять в div, что стоит просто списком и т.д.). введите сюда описание изображения

1
  • Можете попробовать сделать с помощью grid. 3 списка в ряд объединяете в один <div>, и ему задаете display: grid
    – Karaianov
    11 дек 2020 в 9:53

1 ответ 1

1

.container{
display:flex;
flex-direction:row;
}
<div class="container">
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
</div>

<div class="container">
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2
        <ul>
          <li>List 31</li>
          <li>List 32</li>
          <li>List 33</li>
        </ul>
      </li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
    </ul>
  </div>
</div>

Можно через display: flex и список!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.