Сетки

HTML

<!DOCTYPE html> <html lang="ru"> <head> <title>float и ширина</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 block1"> .block1<br> Короткий текст </div> <p>Float'нутый бокс перестает раздаваться на всю ширину родительского бокса-контейнера (как это происходит с блоками в потоке). С его неприжатой к родителю свободной стороны появляется свободное место.</p> <div class="block block2"> .block2<br> Более длинный текст, занимающий всю ширину страницы </div> <p>Следующие за ним блочные боксы подтягиваются вверх и занимают его место, как если бы float'нутого бокса в потоке не было. Строчные же боксы внутри подвинувшихся наверх блоков начинают обтекать float'нутый бокс со свободной стороны.</p> </div> </body> </html>

CSS

body { font-family: "PT Sans", sans-serif; } .container { width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 2px #cccccc; } .block { padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; } p { background: #ecf0f1; border: 2px dotted #bdc3c7; }

HTML Academy

Для .block1 задайте флоат влево.
Для .block2 задайте флоат вправо.
Обоим блокам задайте ширину 100px.

Теория Проверить Следующее задание

Идёт запись на курс JavaScript, уровень 2 #6, который стартует 6 августа.

Курсы

Интенсивы

Информация

Остальное

float и ширина [9/32]

Курсы

Интенсивы

Информация

Остальное