Использование дивов вместо таблиц

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

Теперь проблему можно решить двумя способами (используя кнопки <div> на панели CKeditor).

Способ первый

53abbd9938d387699337f68f

Рис 1

 

53abbf0238d387699337f691

Рис 2

В визуальном редакторе нажимаем на эту кнопку и в открывшемся окне в поле Класс CSS (см. Рис 2) прописываем класс inline-block-wrapper-1, inline-block-wrapper-2 и т.д. до inline-block-wrapper-10 в зависимости от того сколько элементов необходимо выстроить в одну линию.

inline-block-wrapper-1 – ширина блока 100% (соответствие одной ячейки)

inline-block-wrapper-2 – ширина блока 50% (двум ячейкам)

...

inline-block-wrapper-10 – ширина блока 10% (десяти ячейкам)

Ширина в этих случая равна 100% делённое на количество блоков.

 

Кроме того, существуют классы, которые позволяют создавать более универсальную сетку.

inline-block-wrapper-100 - ширина блока 100%,

inline-block-wrapper-95 - 95%,

inline-block-wrapper-90 - 90%,

inline-block-wrapper-85 - 85%,

inline-block-wrapper-80 - 80%,

inline-block-wrapper-75 - 75%,

inline-block-wrapper-70 - 70%,

inline-block-wrapper-66 - 66.66%,

inline-block-wrapper-65 - 65%,

inline-block-wrapper-60 - 60%,

inline-block-wrapper-55 - 55%,

inline-block-wrapper-50 - 50%,

inline-block-wrapper-45 - 45%,

inline-block-wrapper-40 - 40%,

inline-block-wrapper-35 - 35%,

inline-block-wrapper-33 - 33.33%,

inline-block-wrapper-30 - 30%,

inline-block-wrapper-25 - 25%,

inline-block-wrapper-20 - 20%,

inline-block-wrapper-15 - 15%,

inline-block-wrapper-010 - 10%,

inline-block-wrapper-05 - 5%

 

Пример использования дивов:

div

 

Благодаря использованию этого метода вы обеспечите корректное отображение ваших элементов в одну строку. А также сможете реализовать у себя на сайте необходимую струкртуру. И более того, на мобильном устройстве данные блоки выстроятся друг под другом, и пользователь вашего сайта увидит всю информацию, которую вы для него подготовили.

 

Способ второй

Используем другую кнопку <div> (см. Рис 3)

panel_div_grid

Рис 3

В появившемся окне выбираем нужные параметры (см. Рис 4).

Настройка "Равные div-блоки" означает, что будут использованы классы inline-block-wrapper-1, inline-block-wrapper-2 ... inline-block-wrapper-10. Если настройка не включена, то используются классы inline-block-wrapper-100, inline-block-wrapper-95 ... inline-block-wrapper-05.

settings_div_grid

Рис 4

Результатом применения этих настроек будет Рис 5.

result_div_grid

Рис 5

 

Используя контекстное меню (нажав правой клавишей внутри дива) можно редактировать ширину блока кликнув на пункт "Редактировать ячейку div-сетки" (Рис 6)

context_div_grid

Рис 6

Настройки ширины разные в зависимости от того используется ли вы равные (Рис 7) или неравные дивы (Рис 8)

context_settings_div_grid

Рис 7

context_settings_neravnye_div_grid

Рис 8

 

PS. Есть один небольшой, но приятный момент. Раньше для того, чтобы последний элемент не падал вниз, необходимо было переключаться в Формат текста Full и удалять все переносы строк и пробелы между закрывающимся дивом и дивом с введенным вами классом. ТЕПЕРЬ ЭТОГО ДЕЛАТЬ НЕ НУЖНО!!! Вы просто сохраняете ваши изменения в том же режиме, в котором строили эту сетку.

И последнее. Про отличие равных дивов от неравных. Для равных дивов существуют контрольные точки (ширины монитора), достигая которые количество колонок меняется в меньшую сторону.

При достижении максимальной ширины монитора 1024px:

  • из 5,6,7,9 колонок получается 3 колонки
  • из 8 колонок - 4 колонки
  • из 10 колонок - 5 колонок

 

При достижении максимальной ширины монитора 800px:

  • из 4,8,10 колонок получается 2 колонки
  • из 3 колонок - 1 колонка

 

При достижении максимальной ширины монитора 640px: 

  • из 2,3,4,5,6,7,8,9 колонок получается одна.
  • из 10 колонок - 2 колонки
23.11.16 16:51

Ваш комментарий