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

serjik

  • Захожу иногда
  • 344
  • 1 / 1
Долго думал как сформировать тему своего вопроса. Поиск по сайту ничего не дал.

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

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

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


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

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: таблица для адаптивного сайта
« Ответ #1 : 11.02.2016, 15:13:31 »
Воспользуйся параметром: display: inline-block и будет тебе счастье :)

ПРИМЕР
« Последнее редактирование: 11.02.2016, 15:19:51 от alex38ann »
*

serjik

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

alex38ann

  • Захожу иногда
  • 204
  • 7 / 0
  • www.sn38.ru
Re: таблица для адаптивного сайта
« Ответ #3 : 11.02.2016, 15:21:00 »
не успел отредактировать сообщение. посмотри по ссылке примера в предыдущем сообщении
*

serjik

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

dynamit

  • Завсегдатай
  • 1744
  • 265 / 0
  • Winter Is Coming
Re: таблица для адаптивного сайта
« Ответ #5 : 11.02.2016, 16: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

  • Захожу иногда
  • 344
  • 1 / 1
Re: таблица для адаптивного сайта
« Ответ #6 : 11.02.2016, 16:21:34 »
dynamit
и так тоже работает! Спасиб!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Непонятное отображение одной страницы сайта

Автор itbc

Ответов: 12
Просмотров: 716
Последний ответ 14.12.2020, 13:42:32
от itbc
Изменение размера логотипа для сайта в шаблоне

Автор kunsaid

Ответов: 5
Просмотров: 668
Последний ответ 03.12.2020, 20:08:56
от kunsaid
Настройка комментов посетителей сайта в Helix Ultimate

Автор xandr555

Ответов: 4
Просмотров: 1376
Последний ответ 25.12.2019, 04:06:41
от Cedars
Кнопка меню offcanvas в мобильной версии сайта на Helix 3 не кликабельна

Автор Taxagent007

Ответов: 26
Просмотров: 1671
Последний ответ 12.11.2019, 17:59:11
от Any_Color
Редактирование шаблона с главной страницы сайта

Автор Illarya

Ответов: 2
Просмотров: 947
Последний ответ 11.10.2019, 19:18:26
от Illarya