0

На сайте выводятся данные:

image1

Через цикл:

image2

CSS

image3

Не очень понимаю, как сделать вывод, к примеру по 3 элемента (таблички) в ряд, ну то есть, как показано на Скрине 1.

3
  • вам нужна таблица по 3 блока в ряду?
    – Zhihar
    16 окт 2020 в 17:31
  • да, как на 1 скрине
    – TheNoName
    16 окт 2020 в 17:33
  • тогда вам скорее всего display: grid нужен для этого
    – Zhihar
    16 окт 2020 в 17:34

2 ответа 2

0
.card-group{ display: grid; grid-template-columns: 1fr 1fr 1fr;}
2
  • не работает, всё тоже самое
    – TheNoName
    16 окт 2020 в 19:57
  • @Stepan, проверьте сохранили ли вы файл css, т.к. нередко всё не работает просто из-за человеческого фактора😅
    – DGDays
    17 окт 2020 в 2:37
0

Вариант на Grid Layout

.card-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100%;
}

.card-group .card {
  display: block;
  width: 100%;
  background: blue;
}

.card-group .card::before {
  content: '';
  display: block;
  padding-top: 50%;
}
<div class="card-group">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

2
  • Я так же могу вставить в линию больше 4 блоков, мне надо чтобы было ограничение к примеру 3, остальные переносились на следующую линию
    – TheNoName
    17 окт 2020 в 5:02
  • Когда я вставил ваш код, в цикл он размешает неограниченное количество "табличек"
    – TheNoName
    17 окт 2020 в 5:07

Ваш ответ

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

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