Сетки / float vs inline-block [29/32]
×
Курс «Сетки»

float vs inline-block [29/32]

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

Поведение похоже на флоатные элементы, однако, есть существенное отличие.

При переносе на следующую строку блочно-строчные ведут себя намного логичней. Высота строк у них рассчитывается по максимальному элементу с учётом отступов.

Это упражнение создано, чтобы продемонстрировать отличие в поведении флоатов и инлайн-блоков. В исходном состоянии мы видим несколько флоатных блоков, которые не смогли выстроиться в ряды, так как зацепились друг за друга.

Вы измените тип блоков на блочно-строчные и сами всё увидите, насколько умнее ведут себя инлайн-блоки.


Выполнить задание
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"> <div class="block"> Блок 1<br> Товар с очень-очень длинным описанием </div> <div class="block"> Блок 2<br> Обычный товар </div> <div class="block"> Блок 3<br> Обычный товар </div> <div class="block"> Блок 4<br> Еще один товар с длинным описанием </div> <div class="block"> Блок 5<br> Обычный товар </div> <div class="block"> Блок 6<br> Обычный товар </div> <div class="block"> Блок 7<br> Обычный товар </div> <div class="block"> Блок 8<br> Обычный товар </div> </div> </body> </html>
CSS
body { font-size: 16px; font-family: "PT Sans", sans-serif; } .container { width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 2px #cccccc; } .container::after { display: table; content: ""; clear: both; } .block { display: table; float: left; width: 90px; margin-right: 10px; margin-bottom: 10px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; }
HTML Academy

У элементов с классом .block:

  1. отключите режим обтекания,
  2. поменяйте тип на блочно-строчный,
  3. установите вертикальное выравнивание по верхнему краю.
  4. Затем увеличьте маргин снизу до 20px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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