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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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