Div колонки 4 способи розтягнути div колонки по висоті
Раніше, коли для створення шаблонів використовували табличну верстку, створення колонок з однаковою висотою було дуже легким завданням. Все що потрібно було, створити три осередки в одному рядку - все! Але цей метод не прийнятний для наших днів, коли ми використовуємо CSS і DIV верстку.
У цій статті обговорюються деякі методи і техніки створення div колонок, а також їх вирівнювання по висоті. Вимоги до цих способів будуть прості - працездатність у всіх браузерах (навіть в IE6). Всі ці методи будуть реалізовані на 3 стовпчики div шаблоні.
Створимо шаблон, в якому все три div колонки будуть розтягнуті по однаковій висоті.
Спосіб 1: використання атрибута display: table
У цьому методі ми будемо використовувати список або один div блок, який буде містити набір колонок. Зовнішній div блок матиме атрибут display: table, всі внутрішні display: table-cell. За технологією, все колонки розтягнутися за єдиною висоті.
HTML розмітка
Ця техніка дуже проста і легка в реалізації. Цей спосіб набагато простіше, ніж всі інші. Це може зберегти вас від головного болю.
Margin відступ в цьому випадку буде еквівалентом cellspacing в табличній верстці. Також можна використовувати ширину border (тільки колір виставити ідентично фону), або погратися з самої шириною колонок.
Цей варіант не працює в IE7 і версіях нижче. Може пройти дуже довго часу, поки IE7 стане новою проблемою IE6 або IE5. Одним словом, не дуже прийнятний спосіб в плані кросбраузерності.
HTML розмітка
Ви можете винести код в окремий файл і підключити. Або прямо прописати в контексті HTML коду. Тільки переконайтеся, що код буде йти після підключення jQuery бібліотеки.
У цьому коді все найпростішим чином. Ми збираємо колекцію div блоків, які всередині .container div, після чого присвоюємо їм єдину висоту.
Не потрібно писати багато CSS коду, щоб розтягнути колонки по висоті. Також працює у всіх популярних браузерах.
Спосіб 3: штучні колонки
Це найдавніший з методів вирішення цієї проблеми. Цей метод вимагає використання фонової картинки з колірними областями для кожної з колонок. Колонки розміщуються зверху фону, тільки створюючи ілюзію єдиної висоти. Фон повторюється по вертикалі, створюючи враження трьох колонок.
HTML розмітка
Це дуже просто, не потребує багато CSS коду.
Ви не зможете змінювати ширину колонок. Якщо потрібно буде більше або менше колонок, доведеться перемальовувати фонове зображення і змінювати CSS код. Одним словом, доведеться все переробляти!
Спосіб 4: Використання окремих div елементів для фону кожної колонки
Цей принцип схожий на «Матрьошку», де ми будемо використовувати div елементи для фону кожної з колонок. Кожен div блок буде приймати висоту найбільшого з них. Загалом, зараз самі все побачите.
HTML розмітка
Виглядає складно, чи не так? Якщо ви засвоїте цей принцип, тоді зрозумієте що він дуже простий. Ця техніка заснована на наступних 5 ключових моментах:
- .rightback. contentback, і .leftback це зовнішні, обгортають div блоки таких елементів, як .leftsidebar. content і .rightsidebar - які містять контент.
- Кожен обгортають div блок служить фоном для кожного з контентсодержащіх.
- Виключаючи самий зовнішній блок, всі інші div блоки мають відступ справа, який еквівалентний ширині колонки.
- Внутрішні div блоки колонок (.leftsidebar. Content. Rightsidebar) мають обтікання зліва і певну ширину.
- Вони мають відступ зліва, який еквівалентний сумі всіх значень ширини колонок, виключаючи найбільшу. Ось так = ширина rightsidebar (300px) і content (400px) = 700px (B + G).
Картинка знизу показує, як розміщені фонові div елементи .rightback. contentback і .leftback. Найнижчий - .rightback, самий верхній - .leftback елемент.
На наступній картинці, чорні лінії під червоною лінією - це div елементи контент блоків (leftsidebar, content, rightsidebar), вони будуть відображатися в разі отримання властивості float: left; і відповідної ширини.
Всі ці три елементи мають відступ зліва C, використовуючи відносне позиціонування.
C = B + G (дивіться зображення вище).
Він не настільки зрозумілий як інші. Але він найбільш прийнятний для створення великого числа колонок, як тільки ви його освоїте.
Кожен спосіб створення div колонок має свої переваги і недоліки. Раджу використовувати останній, якщо ви шукаєте рішення на чистому CSS коді.