Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
cocacocacoca
0 / 0 / 0
Регистрация: 12.01.2015
Сообщений: 4
1

Резиновая верстка

12.01.2015, 23:56. Просмотров 507. Ответов 7
Метки нет (Все метки)

Подскажите, какими средствами можно решить такое задание:
На странице расположены блоки-ячейки одинаковой высоты и ширины внутри, которых находится картинка и небольшой текст.
Например, максимальная ширина страницы 1000px.
Минимальная ширина каждого блока 150px. Между блоками находятся по бокам отступы. При максимальной ширине страницы помещается в ряд четыре ячейки.
Теперь уменьшая ширину страницы - блоки и отступы, масштабируясь, уменьшаются и дойдя до своего минимального значения в 150px - последний блок в строке уходит вниз и в ряду остается по 3 ячейки; при этом сами блоки снова увеличиваются, чтобы заполнить всю ширину окна.
В общем буду рад любому обсуждению и помощью. Пока в голове сумбур, не получается даже составить грамотный поисковый запрос.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.01.2015, 23:56
Ответы с готовыми решениями:

Резиновая верстка
Такая вот проблема, есть 6 кнопок фиксированного размера.., как правильно их сверстать для разных...

Резиновая верстка
Добрый день! Нужно резиново спозиционировать div относительно wraper. Чтобы при уменьшении размера...

Резиновая верстка
Не могу понять одного. Как выставить "резиновые" параметры для страницы где много графики? ну...

Резиновая верстка
Допустим есть блок: <div class="content"> <div> И стиль: .content { height:450px;

резиновая верстка
как сделать чтобы на всех размерах экрана,блоки с картинками не съезжали друг на друга,а стояли на...

7
technoseal
21 / 21 / 7
Регистрация: 22.07.2014
Сообщений: 129
13.01.2015, 00:16 2
Почитайте литературу на тему адаптивного веб-дизайна / адаптивной верстки
0
cocacocacoca
0 / 0 / 0
Регистрация: 12.01.2015
Сообщений: 4
13.01.2015, 00:20  [ТС] 3
Спасибо, что откликнулись. Я сейчас читаю статью о flex-box. Как считаете подойдет в моем случае? Или пока данное свойство мало поддерживается?
0
Al_lord
38 / 38 / 26
Регистрация: 11.01.2014
Сообщений: 338
13.01.2015, 00:47 4
cocacocacoca, Ну конкретно по вашей теме, почитайте про media запросы в css
0
13.01.2015, 00:47
cocacocacoca
0 / 0 / 0
Регистрация: 12.01.2015
Сообщений: 4
13.01.2015, 01:03  [ТС] 5
То есть вы считаете самым элегантным решением будет создать, в данном случае четыре правила для различных размеров экрана? Не слишком ли тяжеловесно или это стандартная практика?
0
technoseal
21 / 21 / 7
Регистрация: 22.07.2014
Сообщений: 129
13.01.2015, 10:43 6
Цитата Сообщение от cocacocacoca Посмотреть сообщение
То есть вы считаете самым элегантным решением будет создать, в данном случае четыре правила для различных размеров экрана? Не слишком ли тяжеловесно или это стандартная практика?
Это нормально
0
IGI66
1 / 1 / 1
Регистрация: 30.03.2013
Сообщений: 14
13.01.2015, 15:01 7
медиа запросы помогут
0
cocacocacoca
0 / 0 / 0
Регистрация: 12.01.2015
Сообщений: 4
15.01.2015, 22:53  [ТС] 8
Пока сделал через flex - http://jsfiddle.net/coca/nrdkgapx/8/
В принципе нормально. Только последний ряд растягивает на всю длину блока. Но наверняка есть какой-нибудь псевдо-класс. Правда не знаю какой.
Сейчас еще попробую через media.

Добавлено через 3 часа 48 минут
А вот с @media - http://jsfiddle.net/coca/43t3p841/
Может, кто-нибудь даст совет, как сделать более плавными переходы? Буду благодарен.

 Комментарий модератора 
Пожалуйста, выкладывайте код непосредственно в вашем сообщение. Ссылки на песочницу - только дополнение к приведенному коду.
0
15.01.2015, 22:53
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.01.2015, 22:53

Резиновая верстка
как сделать чтоб блоки при увеличении и уменьшении экрана не убегали вниз и вверх, а оставались на...

Резиновая верстка
Здравствуйте. Верстаю одностраничник по готовому дизайну. Ширина шаблона 1903.Из этого расчета и...

резиновая верстка
прилагаю дизайн страницы, в качестве примера конечно же. Хочется узнать ответы на такие вопросы:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru