Простые хаки при верстке

Ранее у меня была статья, как перемещать местами блоки в bootstrap. Статья показалось посетителям интересной, напишу парочку популярных хаков, которые я использую при верстке макетов.

Аналог overflow: hidden без обрезания контента

html

<div class="element">несколько блоков с float: left</div>

css

.element:after {display: table; content: ""; width: 100%;}

Свойство простое, по сути это аналог, когда в конце добавляли div с clear: both.

Отступы между ul li без отступов в начале и конце

По умолчанию когда мы пишем li {margin-top: 10px} мы получаем у первого или последнего отступ лишний.
Решение очень простое
css

ul li + li {margin-top: 10px}

При такой конструкции, отступ будет задаваться только каждому второму элементу и это поддерживают все современные и мертвые ie браузеры. Подобное решение можно получить так же современными параметрами nth-child(odd,even), их я использую для изменения цвета row у таблиц.

2017   css   верстка
Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное