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

  • 6 Ответов
  • 446 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

serjik

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

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

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

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


« Последнее редактирование: 11.02.2016, 15:39:40 от serjik »

*

alex38ann

  • ***
  • 192
  • 7
  • jo-J3-e-Jl-u-P
Re: таблица для адаптивного сайта
« Ответ #1 : 11.02.2016, 17:13:31 »
Воспользуйся параметром: display: inline-block и будет тебе счастье :)

ПРИМЕР
« Последнее редактирование: 11.02.2016, 17:19:51 от alex38ann »
It's my life..

*

serjik

  • ****
  • 333
  • 0
Re: таблица для адаптивного сайта
« Ответ #2 : 11.02.2016, 17:18:43 »
Воспользуйся параметром: display: inline-block и будет тебе счастье :)
а к какому элемент этот параметр нужно применятьне понял? или просто в файле CSS добавить эту строку?

*

alex38ann

  • ***
  • 192
  • 7
  • jo-J3-e-Jl-u-P
Re: таблица для адаптивного сайта
« Ответ #3 : 11.02.2016, 17:21:00 »
не успел отредактировать сообщение. посмотри по ссылке примера в предыдущем сообщении
It's my life..

*

serjik

  • ****
  • 333
  • 0
Re: таблица для адаптивного сайта
« Ответ #4 : 11.02.2016, 17:52:24 »
alex38ann
именно так я и хотел ! Все получилось! Спасибки! :D
« Последнее редактирование: 11.02.2016, 18:07:19 от serjik »

*

dynamit

  • *******
  • 1745
  • 264
  • Winter Is Coming
Re: таблица для адаптивного сайта
« Ответ #5 : 11.02.2016, 18: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%;
}
}
как-то так пробуйте
==================================================
  ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5

*

serjik

  • ****
  • 333
  • 0
Re: таблица для адаптивного сайта
« Ответ #6 : 11.02.2016, 18:21:34 »
dynamit
и так тоже работает! Спасиб!