![]() 0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
|
|
1 | |
Overflow:hidden и адаптивная верстка28.12.2014, 17:00. Показов 4259. Ответов 14
Метки нет Все метки)
(
Всем привет. У меня такая проблемка:
1) на сайте слайдер с инфою о автомобилях; 2) слайдер состоит из 3-х див блоков; 3) 1 блок (клас авто.) 2 блок (фото авто.) 3 блок (описание авто.); 4) все блоки завернуты в один wrapper, с заданной высотой и свойством overflow:hidden Как сделать так, чтобы при уменьшении размера браузера, блоки вставали один под другой? У меня просто блок исчезает, наверное из за того что стоит фиксированая высота. Нужно как то динамически изменять высоту блока при изменении размеров экрана. Помогите пожалуйста.
0
|
28.12.2014, 17:00 | |
28.12.2014, 17:00 | |
Ответы с готовыми решениями:
14
Overflow: hidden CSS overflow hidden отменить overflow hidden |
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
|
|||||||||||
28.12.2014, 17:01 | 2 | ||||||||||
задайте свойство float. Прижмите все к оному краю. Т.е. на всех задайте
0
|
![]() 0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
|
|
28.12.2014, 17:14 [ТС] | 3 |
у всех 3-х блоках стоит float:left, не помогает. При уменьшении окна браузера, блок не ложиться один под другой так как высота блока фиксированная, а все что за пределами прячется свойством overflow. Если убрать высоту или хидден то все слайды вываливаються на странице, пропадает смысл слайдера((((
0
|
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
|
||||||
28.12.2014, 17:23 | 4 | |||||
уберите
Добавлено через 7 минут привидите пример кода, З,Ы Без фиксированной высоты никак нельзя?
0
|
![]() 0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
|
|
28.12.2014, 17:25 [ТС] | 5 |
я же написал что если убрать Overflow:hidden то все слайды отображаются на странице, а мне нужно чтобы отображался только один, поэтому без Overflow:hidden никак не обойтись.
0
|
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
|
|
28.12.2014, 17:30 | 6 |
0
|
![]() 0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
|
|||||||||||
28.12.2014, 17:32 [ТС] | 7 | ||||||||||
0
|
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
|
|
28.12.2014, 17:34 | 8 |
мало, все блоки у меня друг под другом, нужно больше примера.
0
|
![]() 0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
|
|
28.12.2014, 17:42 [ТС] | 9 |
visibility не помогает, все исчезает, вот фотка слайдера
вот фотка когда уменьшаю окно браузера как видно последний блок исчезает, а должен опуститься ниже первых двух блоков а что еще нужно? у каждого из 3 блоков задан float: left и ширина в процентах
0
|
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
|
||||||
28.12.2014, 17:47 | 10 | |||||
Как насчет
0
|
![]() 0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
|
|
28.12.2014, 17:55 [ТС] | 11 |
min-width не помогает, да и зачем его использовать, если проблема именно в высоте родительского блока. У меня уже такое ощущение что одним CSS тут не обойтись, либо переделывать сам слайдер без использования overflow, либо применять jQuery и шаманить над высотой. Погуглил, подобной проблемы не нашел((
0
|
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
|
|
28.12.2014, 18:02 | 12 |
Ну не знаю. ... Имспользуйте тогда там верстку не блоками , а таблицей. Раз на то пошло,тогда уже надо крайние методы применять
0
|
![]() 0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
|
|
28.12.2014, 18:37 [ТС] | 13 |
Проблему решил с помощью медиа запросов, при max-width: 768px добавил главному блоку высоту в 2 разы больше его изначальной, благодаря этому последний блок красиво разместился ниже первых двух. Вообщем ребята, суть этой басни такова: если хотите адаптивный слайдер то ищите слайдер без свойства overflow:hidden
0
|
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
|
|
28.12.2014, 20:07 | 14 |
Так, как я и предлагал )
Добавлено через 48 минут но как минимум хоть 1 плюсик я заслужил)
1
|
![]() 419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
|
|
29.12.2014, 06:28 | 15 |
если вы хотите выстроить в ряд слайды с помощью float, то понадобится еще один слой-обертка с шириной N*100%, где N - число слайдов.
при уменьшении ширины окна браузера для слайдов отмените float и сделайте display: block, а для обертки width - 100%.
1
|
29.12.2014, 06:28 | |
29.12.2014, 06:28 | |
Помогаю со студенческими работами здесь
15
float + overflow:hidden Вытянуть объект из overflow: hidden; overflow: hidden у обтекающего элемента Overflow: hidden и position: relative Overflow: hidden yandex browser Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
![]() |
Опции темы | |
|
Новые блоги и статьи
![]() |
||||
Ошибка "Cleartext HTTP traffic not permitted" в Android
hw_wired 13.02.2025
При разработке Android-приложений можно столнуться с неприятной ошибкой "Cleartext HTTP traffic not permitted", которая может серьезно затруднить отладку и тестирование. Эта проблема особенно. . .
|
Изменение версии по умолчанию в NVM
hw_wired 13.02.2025
Node Version Manager, или коротко NVM - незаменимый инструмент для разработчиков, использующих Node. js. Многие сталкивались с ситуацией, когда разные проекты требуют различных версий Node. js,. . .
|
Переименование коммита в Git (локального и удаленного)
hw_wired 13.02.2025
Git как система контроля версий предоставляет разработчикам множество средств для управления этой историей, и одним из таких важных средств является возможность изменения сообщений коммитов. Но зачем. . .
|
Отличия Promise и Observable в Angular
hw_wired 13.02.2025
В веб-разработки асинхронные операции стали неотъемлимой частью почти каждого приложения. Ведь согласитесь, было бы странно, если бы при каждом запросе к серверу или при обработке больших объемов. . .
|
Сравнение NPM, Gulp, Webpack, Bower, Grunt и Browserify
hw_wired 13.02.2025
В современной веб-разработке существует множество средств сборки и управления зависимостями проектов, каждое из которых решает определенные задачи и имеет свои особенности. Когда я начинаю новый. . .
|
Отличия AddTransient, AddScoped и AddSingleton в ASP.Net Core DI
hw_wired 13.02.2025
В современной разработке веб-приложений на платформе ASP. NET Core правильное управление зависимостями играет ключевую роль в создании надежного и производительного кода. Фреймворк предоставляет три. . .
|
Отличия между venv, pyenv, pyvenv, virtualenv, pipenv, conda, virtualenvwrapper, poetry и другими в Python
hw_wired 13.02.2025
В Python существует множество средств для управления зависимостями и виртуальными окружениями, что порой вызывает замешательство даже у опытных разработчиков. Каждый инструмент создавался для решения. . .
|
Навигация с помощью React Router
hw_wired 13.02.2025
React Router - это наиболее распространенное средство для создания навигации в React-приложениях, без которого сложно представить современную веб-разработку. Когда мы разрабатываем сложное. . .
|
Ошибка "error:0308010C:digital envelope routines::unsupported"
hw_wired 13.02.2025
Если вы сталкиваетесь с ошибкой "error:0308010C:digital envelope routines::unsupported" при разработке Node. js приложений, то наверняка уже успели поломать голову над её решением. Эта коварная ошибка. . .
|
Подключение к контейнеру Docker и работа с его содержимым
hw_wired 13.02.2025
В мире современной разработки контейнеры Docker изменили подход к созданию, развертыванию и масштабированию приложений. Эта технология позволяет упаковать приложение со всеми его зависимостями в. . .
|