2

Посоветуйте, как правильно сверстать такой сайт, приведённый на рисунке?
Интересует вопрос, нужно ли применять здесь float для блоков в шапке и вообще по всему сайту?
т.е. там где логотип, телефон, кнопка перезвонить, корзина, они должны обтекать с помощью float, или тут правильней применить flex?
Также и по контенту и выравнивание товаров интересует, что тут применять: float или flex ? Как расположить контейнеры aside и content ? Можно ли сделать такой сайт полностью на flex? и правильно ли будет такое решение?
Также нужно предусмотреть адаптив

введите сюда описание изображения

2 ответа 2

2

Хороший вопрос. Последний раз я пробовала верстать прямо полностью на флексах где-то полгода назад, и тогда по кроссбраузерности они себя показали так себе. И, насколько я поняла, если нужно поддерживать IE, то от флексов стоит воздержаться, по-крайней мере не делать на них полностью весь шаблон. И тестить, часть свойств может косячно работать.

Остальное - дело вкуса и момента.

Я обычно комбинирую inline-box и float. Что из них лучше выбрать - вопрос контекста.

Например, адаптивный сайт. Лого должно быть выровнено четко по левому краю на декстопе, а корзина - по правому краю (по ширине контента). Между ними - строго по центру идет меню сайта с n-м кол-вом пунктов, причем со временем их может становиться больше или меньше. А на планшете лого и корзина уходят вверх, тогда как меню опускается ниже. Тут будет логично выравнивать меню и корзину через float (по правому и левому краю соответственно), менюхе задавать display: inline-block, а всей шапке в целом text-align:center.

Или, использовать флексы, если мы не боимся проблем в IE.

Вот очень крутой пример витрины магазина на флексах. http://html.innova-media.ru/product_list/index.html

Если собираемся поддерживать все, еще дышащие почему-то, браузеры, то такого типа витрину хорошо верстать на инлайн-блоках. С выравниваниями по ширине-высоте и text-align для родительского контейнера, для адаптивного решения это более выгодное и гибкое решение, нежели использование float.

Одним словом - ответ на Ваш вопрос - комбинировать решения, в зависимости от задачи блоков и их поведении при адаптации. В идеале еще подумать о будущем сайта, например, что если добавится еще пункт меню, что если контента aside станет меньше/больше, это поможет лучше сориентироваться в выборе способа позиционирования.

3
  • 1
    Ссылки на примеры в ответах почти бесполезны. Пройдет полгода, сайт полностью поменяется или вообще магазин закроется — ссылка потеряет смысл.
    – Nick Volynkin
    11 июл 2017 в 5:55
  • Это правда. Но то же самое можно сказать про ссылки на всевозможные статьи (даже хабр, пропадают оттуда демо, скрины и т.д.), примерчики на codepen и прочее. Но тут ссылка - не руководство к действию, а иллюстрация. Умрет, достаточно погуглить примеры. Кроме того, через полгода мой ответ может быть в принципе уже не актуальным =) Вот тут переменные в css появляются.. А может мы все будем на гридах уже делать) 11 июл 2017 в 19:20
  • Кстати! Это не магазин, это учебный пример, сделанный автором к какой-то из его статей. Там не настоящие товары, а демонстрация. Так что как раз он может прожить гораздо дольше) Есть вкладка "адаптивная сетка", например, там же. 11 июл 2017 в 19:24
1

Рекомендую ознакомиться с сеткой Bootstrap и взять на вооружение display: inline-block

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.