Форум русской поддержки Joomla!® CMS
05.12.2016, 16:37:57 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

таблица для адаптивного сайта

 (Прочитано 296 раз)
0 Пользователей и 1 Гость смотрят эту тему.
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« : 11.02.2016, 13:20:43 »

Долго думал как сформировать тему своего вопроса. Поиск по сайту ничего не дал.

Суть проблемы которую я пытаюсь решить такова: Делаю адаптивный (тоесть резиновый) сайт на главной странице которого в горизонтальный ряд должны размещаться три квадратных блока с информацией (или 3 модуля), а при сжатии сайта когда включается режим мобильной версии эти блоки ввиду того что они не могут уже сжаться до экрана мобильного должны перескакивать один под другой в вертикальный ряд. В крайнем случае если так не выйдет сделать они вообще должны исчезать.

Пытался решить эту задачу посредствои HTML таблицы но не вышло, поиск модулей которые могли бы решить эту задачу так же не дал ничего. Буду благодарен за любой совет Azn)

картинка для наглядности мысли )))


« Последнее редактирование: 11.02.2016, 14:39:40 от serjik » Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #1 : 11.02.2016, 16:13:31 »

Воспользуйся параметром: display: inline-block и будет тебе счастье Azn

ПРИМЕР
« Последнее редактирование: 11.02.2016, 16:19:51 от alex38ann » Записан
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« Ответ #2 : 11.02.2016, 16:18:43 »

Воспользуйся параметром: display: inline-block и будет тебе счастье Azn
а к какому элемент этот параметр нужно применятьне понял? или просто в файле CSS добавить эту строку?
Записан
alex38ann
Осваиваюсь на форуме
***

Репутация: +7/-0
Offline Offline

Пол: Мужской
Сообщений: 195


jo-J3-e-Jl-u-P


« Ответ #3 : 11.02.2016, 16:21:00 »

не успел отредактировать сообщение. посмотри по ссылке примера в предыдущем сообщении
Записан
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« Ответ #4 : 11.02.2016, 16:52:24 »

alex38ann
именно так я и хотел ! Все получилось! Спасибки! Cheesy
« Последнее редактирование: 11.02.2016, 17:07:19 от serjik » Записан
dynamit
Практически профи
*******

Репутация: +264/-0
Offline Offline

Пол: Мужской
Сообщений: 1748


Winter Is Coming


« Ответ #5 : 11.02.2016, 17:07:31 »

Код:
#gkHeaderBottom > div {
  display: inline-block;
  width: 30%;
  min-height: 200px;
  background: black;
  box-sizing: border-box;
  padding:10px;
}
@media screen (max-width: 768px;) {
#gkHeaderBottom > div{
  width: 100%;
}
}
как-то так пробуйте
Записан
serjik
Давно я тут
****

Репутация: +1/-1
Offline Offline

Сообщений: 338


« Ответ #6 : 11.02.2016, 17:21:34 »

dynamit
и так тоже работает! Спасиб!
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet