Четверг, 2024-03-28, 9:34 PM

Поиск
Меню
Категории раздела
PHP [40]
Cкриптовый язык программирования общего назначения
MySQL [1]
Cвободная система управления базами данных (СУБД)
jQuery [8]
Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML
CSS [60]
Cредство описания, оформления внешнего вида веб-страниц
JavaScript [161]
Прототипно-ориентированный скриптовый язык программирования
Веб-дизайн [2]
Проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений
RegExp [1]
Регулярные выражения
SEO [2]
Продвижение и раскрутка сайтов. Заработок в сети.
C/C++ [3]
Компилируемый статически типизированный язык программирования общего назначения
Windows [4]
Программистам под ОС MS Windows
HGE [2]
Игровой движок HGE (Haaf's Game Engine)
Игровой дизайн [8]
Психология дизайна игр
Разработка игр [2]
Общие моменты, относящиеся к геймдеву
wxWidgets [2]
Библиотека инструментов для разработки кроссплатформенных приложений
PureBasic [10]
Кроссплатформенный компилятор и IDE для быстрой разработки
VST [6]
Steinberg's Virtual Studio Technology (VST)
iOS [1]
Mобильная операционная система, разрабатываемая и выпускаемая американской компанией Apple
Пиксельная графика [9]
Pixel art и все, что с ним связано
libGDX [2]
Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Поддержи проект!
Рекомендуем


Блог разработчика

Главная » 2013 » Июнь » 18 » Блоки DIV в колонках одинаковой высоты, с использованием CSS.
11:45 AM
Блоки DIV в колонках одинаковой высоты, с использованием CSS.
Cмотреть пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
 <head>
 <title>
 Блоки DIV в колонках одинаковой высоты с использованием CSS
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style type="text/css">
 #container { overflow: hidden; }
 #container div { float: left; background: #ccc; width: 45%; margin-bottom: -20000px; padding-bottom: 20000px; padding-left:30px }
 #container .col2 { background: #eee; }
 </style>
 </head>
 <body>
 <h1>
 DIV колонки одинаковой высоты
 </h1>
 <div id="container">
 <div>
 <p align="justify">
 Столбцы одинаковой высоты при помощи CSS. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi
 libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est
 gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed
 ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit.
 Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.
 </p>
 </div>
 <div class="col2">
 <p align="justify">
 Решение проблемы - DIV одинаковые по высоте. Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit
 amet nulla. Suspendisse sed tellus. In eget mi in risus adipiscing lobortis. Nam lobortis ipsum quis nibh. Donec odio. Nullam fermentum, leo id condimentum viverra, augue nibh viverra dui,
 in placerat arcu sapien nec velit. Nunc tincidunt molestie elit. Sed est mi, posuere vitae, congue vitae, pulvinar vel, enim. Morbi vestibulum erat sed risus. Nulla facilisi.
 </p>
 <p>
 Integer nec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum venenatis velit. Morbi interdum eleifend sapien. Morbi a mauris. Nulla auctor varius elit.
 Mauris id nibh ac orci egestas gravida. Nam orci. Fusce dui. Nulla interdum pharetra mauris. Sed fermentum purus ac lectus. Vivamus et dui ac quam vehicula tristique. Cras sem. Integer non
 nisi commodo elit sagittis interdum.
 </p>
 </div>
 </div>
 </body>
</html>
Категория: CSS | Просмотров: 644 | Добавил: poster | Теги: пример, CSS | Рейтинг: 0.0/0

Поблагодарить автора



Комментарии