Сетки / Простая сетка на inline-block [30/32]
×
Курс «Сетки»

Простая сетка на inline-block [30/32]

Блочно-строчные элементы очень часто используют для создания декоративных элементов: кнопок, плашек, блочков. Также благодаря их умному поведению с их помощью создают различные списки товаров в каталогах.

Для создания сеток страниц эти элементы используются реже. Первая причина заключается в том, что их не поддерживают старые браузеры, например, IE7 и младше. А сетка страницы — слишком критичная вещь, чтобы позволять ей ломаться даже в старых браузерах.

Есть и еще одна проблема, с которой мы столкнёмся в этом задании. Давайте попробуем построить сетку, как на картинке, когда у нас края товаров вплотную прилегают к краям контейнера:

Ширина контейнера 400px, ширина товара с рамками 120px, отступ между товарами 20px. Чтобы три товара влезали в строку «пиксель-в-пиксель», нужно у каждого третьего товара обнулить отступ справа. Используем для этого селектор .item:nth-child(3n).


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>float vs inline-block</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <h1>Каталог в три колонки</h1> <div class="catalog"> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> </div> </div> </body> </html>
CSS
body { font-size: 16px; font-family: "PT Sans", sans-serif; } h1 { margin: 0; margin-bottom: 0.5em; font-size: 18px; } .container { width: 400px; margin: 20px auto; } .catalog { width: 400px; background: #ecf0f1; box-shadow: 0 0 3px #999999; } .item { width: 116px; min-height: 75px; margin-bottom: 20px; text-align: center; color: white; background: #3498db; border: 2px solid #2c3e50; }
HTML Academy
  1. Задайте элементам с классом .item блочно-строчный тип,
  2. маргин справа 20px
  3. и вертикальное выравнивание по верхнему краю.
  4. Затем обнулите маргин справа у каждого третьего .item.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.