Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
2 / 2 / 2
Регистрация: 28.02.2016
Сообщений: 158

Вёрстка адаптивного шаблона

02.11.2016, 23:48. Показов 1121. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Приветствую.
Помогите.

Нужно сделать чтобы блок был адаптивен.

Схема блока вкратце:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="block">
 
<div class="image">
<img  src="img.jpg">
</div>
 
<div class="text">
Text
</div>
 
</div>
В общем после экспериментов с %, vh, vw, vmin и vmax я добился адаптива для экрана ноутбука 1366х766 и для экрана смартфона 720х1280, но вот если открыть страницу с компьютера, а экран там квадратный - некрасиво получается.

Divы внутри display: inline-block;


Помогите сделать универсальный пластик
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
02.11.2016, 23:48
Ответы с готовыми решениями:

Вёрстка адаптивного шаблона по макету
Ребят, помогите правильно шаблон сделать, а то в итоге получаются смещения :/ На скрине показана структура. Структура будет резиновая...

Вёрстка адаптивного слайдера
Может быть кто то может поделиться слайдером адаптивным. Высотой 300 а ширина будет в блоке до 1170, сверху стрелки две в квадратном блоке...

Вёрстка адаптивного меню
Всем привет. Ребята, подскажите пожалуйста, как сделать чтобы блок в котором менюшка, увеличивался по высоте при сужении окна браузера т.е....

2
19 / 1 / 3
Регистрация: 02.11.2016
Сообщений: 132
02.11.2016, 23:56
Hinc, пошамань с flexbox http://frontender.info/a-guide-to-flexbox/
0
2 / 2 / 2
Регистрация: 28.02.2016
Сообщений: 158
03.11.2016, 00:04  [ТС]
_BoGdaN_, о, круть.
Спасибо. Почитаю. Судя по первым абзацам - это то, что нужно.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
03.11.2016, 00:04
Помогаю со студенческими работами здесь

Вёрстка адаптивного квадрата
Задача лежит в том, чтобы сделать адаптированный квадрат. ТО есть страница динамическая, может иметь и 500px в ширину может и 1000, как...

Вёрстка адаптивного сайта
Добрый день, это конечно прозвучит глупо, я и сам удивляюсь. не могу задать своим страницам расширение под разные мониторы. Так называемый...

Вёрстка адаптивного меню
Подскажите пожалуйста, как сделать адаптивное меню такого плана, как на картинке...

Вёрстка адаптивного меню
Здравствуйте. Делаю (точнее, пытаюсь делать) адаптивный дизайн для сайта. Встала задача сделать адаптивное горизонтальное меню. Порылся в...

Вёрстка адаптивного фона для страницы
Как сделать фон такой фон: Используя эти картинки? Вот HTML и CSS страницы:


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru