Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 35 из 53 · 12 мин
float, clear, columns, column-count, column-gap и column-rule.
Хочу блог как в журнале: фото, а текст его обтекает.
Раньше float верстали целые страницы. Теперь он для того, для чего придуман, — обтекания.
floatfloat: left — элемент прижимается влево, текст обтекает его справа.<style>
.pic { float: left; width: 50px; height: 50px; background: #c8763a; margin: 0 8px 4px 0; } p { margin: 0; }
</style>
<div class="pic"></div><p>Текст обтекает картинку: картинка стоит слева, а слова огибают её справа. Текст продолжается под ней.</p>clearclear: both — элемент встаёт ниже всех float.<style>
.pic { float: left; width: 40px; height: 40px; background: #c8763a; margin-right: 8px; } h5 { clear: both; margin: 4px 0 0; }
</style>
<div class="pic"></div><p style="margin:0">Коротко.</p><h5>Новый раздел — под фото</h5>columnscolumns: 2 или columns: 200px — текст сам делится на колонки.<style>
p { columns: 2; column-gap: 16px; margin: 0; }
</style>
<p>Длинная статья сама делится на колонки, как в газете. Браузер переносит текст из одной колонки в другую, когда первая заполнится.</p>column-countcolumn-count: 3 — ровно три колонки.column-rulecolumn-rule: 1px solid #ccc — как border, но между колонками.<style>
p { columns: 2; column-gap: 16px; column-rule: 1px solid #c8763a; margin: 0; }
</style>
<p>Линия между колонками рисуется сама. Её не надо добавлять разметкой — это просто CSS.</p>float — для обтекания. Для раскладки страницы есть flex и grid.
Прижми .pic влево (float: left) с отступом margin-right: 16px, а h2 начни под ним (clear: both).
Раздели .article на две колонки (columns: 2) с линией column-rule: 1px solid #c8763a.
Выберите один ответ.
Для чего сегодня уместен float?
Выберите один ответ.
Какое свойство рисует линию между колонками текста?
Проверяем состояние обучения…