Аватар для exspool
0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
1

Overflow:hidden и адаптивная верстка

28.12.2014, 17:00. Показов 4259. Ответов 14
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем привет. У меня такая проблемка:

1) на сайте слайдер с инфою о автомобилях;
2) слайдер состоит из 3-х див блоков;
3) 1 блок (клас авто.) 2 блок (фото авто.) 3 блок (описание авто.);
4) все блоки завернуты в один wrapper, с заданной высотой и свойством overflow:hidden

Как сделать так, чтобы при уменьшении размера браузера, блоки вставали один под другой? У меня просто блок исчезает, наверное из за того что стоит фиксированая высота. Нужно как то динамически изменять высоту блока при изменении размеров экрана. Помогите пожалуйста.
0
28.12.2014, 17:00
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
28.12.2014, 17:00
Ответы с готовыми решениями:

Overflow: hidden
Ну, вот собственно, элементарный код: <table width="50%"> <tr> <td style="height: 50px; overflow: hidden;"> в чащах юга жил...

CSS overflow hidden
проблема в том что на сайте siteкогда ставлю overflow hidden облака исчезают полностью а когда убираю есть прокрутка в права тс как...

отменить overflow hidden
Доброго времени суток, требуется помощь, сломал голову уже, вот накидал образец существующей верстки <body> <div>...

14
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
28.12.2014, 17:01 2
задайте свойство float. Прижмите все к оному краю. Т.е. на всех задайте
HTML5
1
float:right;
или
HTML5
1
float:left;
0
 Аватар для exspool
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
уберите
HTML5
1
Overflow:hidden
вообще, напишите, получилось или нет

Добавлено через 7 минут
привидите пример кода, З,Ы Без фиксированной высоты никак нельзя?
0
 Аватар для exspool
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
Цитата Сообщение от paskalnikita Посмотреть сообщение
приведите пример кода
а visible не пробовали?
0
 Аватар для exspool
0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
28.12.2014, 17:32  [ТС] 7
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="slider_wrapper">
        <div id="big_slider">
            <div id="0" class="slide">
                                <div class="class_roller">
                                        [B]клас[/B]
                    </div>
                    <div class="foto">
                                       [B]фотка[/B]
                    </div>
                    <div id="desc_slider">
                                       [B]описание[/B]
                        </div>
                </div>
            <div id="1" class="slide"></div>
                .................................................
</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
#big_slider {
      width: 100%;
      float: left;
      overflow: hidden;
      height: 360px;
}
 
#slider_wrapper {
      width: 100%;
}
0
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
28.12.2014, 17:34 8
мало, все блоки у меня друг под другом, нужно больше примера.
0
 Аватар для exspool
0 / 0 / 0
Регистрация: 10.05.2011
Сообщений: 14
28.12.2014, 17:42  [ТС] 9
visibility не помогает, все исчезает, вот фотка слайдера

вот фотка когда уменьшаю окно браузера


как видно последний блок исчезает, а должен опуститься ниже первых двух блоков

Цитата Сообщение от paskalnikita Посмотреть сообщение
мало, все блоки у меня друг под другом, нужно больше примера.
а что еще нужно? у каждого из 3 блоков задан float: left и ширина в процентах
0
86 / 86 / 30
Регистрация: 12.08.2014
Сообщений: 1,129
28.12.2014, 17:47 10
Как насчет
HTML5
1
min-width:
?
0
 Аватар для exspool
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
 Аватар для exspool
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
Цитата Сообщение от paskalnikita Посмотреть сообщение
уберите
Код HTML5
1
Overflow:hidden
вообще, напишите, получилось или нет
Так, как я и предлагал )

Добавлено через 48 минут
но как минимум хоть 1 плюсик я заслужил)
1
 Аватар для monochromer
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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
29.12.2014, 06:28
Помогаю со студенческими работами здесь

float + overflow:hidden
Доброго времени суток! Требуется научное объяснение следующей ситуации: когда дочерние элементы имеют свойство float:left, то...

Вытянуть объект из overflow: hidden;
Ситуация такова: Есть слайдер, в нем кнопки переключения слайдов, лежат в корне блока, размеры блока заданы по высоте и стоит overflow....

overflow: hidden у обтекающего элемента
Странно работает следующий код: &lt;div class=&quot;float&quot;&gt;LOL&lt;/div&gt; &lt;div class=&quot;floating&quot;&gt;LOL&lt;br&gt;LOL&lt;/div&gt; при следующих стилях: .float...

Overflow: hidden и position: relative
Всем привет. Кто-то может мне объяснить проблему overflow: hidder и position: relative. Я делаю слайдер и когда я к родительскому элементу...

Overflow: hidden yandex browser
Имеем верстку на тестовом домене Проблема с видео слайдером ( там где фон монитор ПК ) , проблема только в yandex browser У контейнера...


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

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

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Опции темы

Новые блоги и статьи
Ошибка "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, virtualenvwrapp­­er, poetry и другими в Python
hw_wired 13.02.2025
В Python существует множество средств для управления зависимостями и виртуальными окружениями, что порой вызывает замешательство даже у опытных разработчиков. Каждый инструмент создавался для решения. . .
Навигация с помощью React Router
hw_wired 13.02.2025
React Router - это наиболее распространенное средство для создания навигации в React-приложениях, без которого сложно представить современную веб-разработку. Когда мы разрабатываем сложное. . .
Ошибка "error:0308010C­­:dig­ital envelope routines::unsup­­ported"
hw_wired 13.02.2025
Если вы сталкиваетесь с ошибкой "error:0308010C:digital envelope routines::unsupported" при разработке Node. js приложений, то наверняка уже успели поломать голову над её решением. Эта коварная ошибка. . .
Подключение к контейнеру Docker и работа с его содержимым
hw_wired 13.02.2025
В мире современной разработки контейнеры Docker изменили подход к созданию, развертыванию и масштабированию приложений. Эта технология позволяет упаковать приложение со всеми его зависимостями в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru