Еще с детства нас научили читать по срокам, слева направо. Так сложилось исторически, к этому мы привыкли и часто с этим фактором ассоциируется и наше мировосприятие, в том числе и интернет ресурсов. То есть можно утверждать, что строчная "грядка" блоков легко воспринимается, она приятна глаза, она функциональная и естественная. Так вот, не смотря на всю примитивность кажущего в наших глазах, для того чтобы сделать красивые блоки по горизонтали в CSS придется все же потрудиться.
Именно о том, как же сделать в строчные блоки, то есть по горизонтали по ширине страницы, я и расскажу в этой статье. Кроме того, блоки будет иметь свойство небольшой интерактивности, то есть при наведении на них мышкой чуть приподниматься. Начнем.
Будет приведено пару примеров с различным количеством блоков и немного с разным оформлением, но основной принцип CSS для каждой из строк будет аналогичен.
Пример 1
Смотреть кодЧтобы не забивать статью, описание будет прямо в коде. Советую открывать в новой вкладке и смотреть вместе с примером.
Пример 2
Смотреть код
Ну что, подобный код можно применять для всех блочных элементов, будь то просто дивы, кнопки, формы ввода. Так что утверждаю, что данный код универсален и полезен для верстки страниц сайта.
Пример 3 (justify-content & flex)
Смотреть код
Пример 4 (с картинками svg)
Смотреть код