Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/15: Рейтинг темы: голосов - 15, средняя оценка - 4.60
2 / 2 / 0
Регистрация: 29.04.2014
Сообщений: 31
1

Адаптивные div по горизонтали

16.06.2017, 02:16. Показов 3135. Ответов 2
Метки нет (Все метки)

всем привет!
давно не верстал, все вылетело, выручайте :-)

задача следующая:
Есть родительский блок, минимальная ширина которого 1000px а максимальная 1260px.
В нем 4 горизонтальных блока, необходимо чтобы они подстраивались по ширине. В идеале еще, чтобы высота пропорционально уменьшалась.

Что не так? И как сделать правильно?
Заранее спасибо :-)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div style="max-width: 1260px; min-width: 1024px; position: relative; height: 100px; border: 4px solid #000;">
 
<div style="max-width: 315px; min-width: 256px; height: 100px; background-color: #006699; float: left; cursor: pointer; opacity: 0.8; overflow: hidden;">
</div>
 
<div style="max-width: 314px; min-width: 255px; height: 100px; background-color: #006699; float: left; margin-left: 1px; cursor: pointer; opacity: 0.8; overflow: hidden;">
</div>
 
<div style="max-width: 314px; min-width: 255px; height: 100px; background-color: #006699; float: left; margin-left: 1px; cursor: pointer; opacity: 0.8; overflow: hidden;">
</div>
 
<div style="max-width: 314px; min-width: 255px; height: 100px; background-color: #006699; float: left; margin-left: 1px; cursor: pointer; opacity: 0.8; overflow: hidden;">
</div>
 
</div>
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.06.2017, 02:16
Ответы с готовыми решениями:

Выровнять по центру, по горизонтали div, внутри другого div
Есть див, в нём три других дива. Как выровнять их по середине? В этих блоках был использован...

Позиционирование DIV по горизонтали
Всем привет! В общем у меня проблема такая, мне нужно разместить в родителе с фиксированной...

Блоки Div по горизонтали
Проблема ерундовая но решить её у меня пока не получается. нужно сделать так чтобы блоки DIV...

Изображения по div с прокруткой по горизонтали
Доброго всем времени суток. Я хотел бы попросить помочь мне со следующей проблемой. Суть такова. На...

2
83 / 80 / 42
Регистрация: 20.01.2017
Сообщений: 219
16.06.2017, 10:10 2
добавьте внутренним дивам ширину 100%, но адаптивность будет только в интервале, который вы задали max-width: 315px; min-width: 256px;
адаптивность подразумевает относительные величины для размеров (%,em,vw,vh).
0
2 / 2 / 0
Регистрация: 29.04.2014
Сообщений: 31
16.06.2017, 13:53  [ТС] 3
SergioSup, спасибо!
Внутренние блоки до максимальной ширины растянулись, по при изменении окна браузера почему то не хотят сужаться :-(

Добавлено через 1 час 0 минут
Вопрос решил,
убрал max width и min width и везде проставил width: 25%; , а так как у 3х блоков есть margin-left в 1px, у 3х блоков width: calc (25% - 1px);
Всем спасибо!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.06.2017, 13:53

Два блока DIV рядом по горизонтали.
Помогите пожалуйста ни как не могу сделать чтоб два блока DIV были рядом по горизонтали и чтоб...

Адаптивные электроприводы
Доброго времени суток. Друзья мои, очень нужна ваша помощь. Надо решить задачу, а именно:...

Адаптивные картинки
Приветствую, форумчане. Подскажите, пожалуйста, что нужно прописать для картинки, чтобы она была...

Адаптивные таблицы
Можно как-то сделать таблицу адаптивной или хотя бы добавить к ней (а не к странице) горизонтальную...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru