Сайт о телевидении

• Title

  Link

• Title

  Lorem ipsum dolor sit amet, consectetur adipisicing elit... Link

• Title

  Lorem ipsum dolor sit amet, consectetur adipisicing elit... Link

Всё, что необходимо для создания контейнера flexbox, это display: flex; Я добавил display: flex; На родительский элемент ul (.list), чтобы управлять его дочерними элементами (.list-items).

List { display: flex; flex-wrap: wrap; }

Теперь давайте добавим некоторые медиа-запросы. Мой макет будет начинаться с одной колонки на строку, пока размер экрана не достигнет 40em. Затем разместим по два элемента на строку до тех пор, пока размер экрана не достигнет 60em, затем макет переключится на три колонки в строке.

@media all and (min-width: 40em) { .list-item { width: 50%; } } @media all and (min-width: 60em) { .list-item { width: 33.33%; } }

Я добавил display: flex; К элементам списка, чтобы каждый элемент li растягивался по вертикали. По умолчанию Flex растягивает элементы по вертикали, поэтому колонки могут быть одинаковыми по высоте. Теперь это дает возможность управлять дочерними элементами, позволяя мне закрепить ссылки в нижней части каждого сообщения.

List-item { display: flex; padding: 0.5em; width: 100%; }

Ну и наконец display:flex; Применяем к.list-content, чтобы я мог стилизовать

Внутри него. Поскольку элементы flex размещаются в строке по умолчанию, я указал направление, которое должно быть столбцом.

List-content { display: flex; flex-direction: column; background-color: #fff; padding: 1em; width: 100%; } .list-content p { flex: 1 0 auto; }

Данный небольшой урок по CSS посвящён тем, кто хочет освоить блочную вёрстку. Сегодня мы разберём такой вопрос, как создание 2-х колонок одинаковой высоты при помощи блоков, а не таблиц.

Это умение применяется практически везде, даже верстая стандартный макет из 2-х колонок, вы столкнётесь с этой проблемой, если вы будете верстать блоками. Так же этот урок направлен на развитие понимания самих принципов блочной вёрстки.

Посмотрите на изображение ниже. При помощи таблиц такой результат достигается автоматически.

Но с блоками всё иначе. Посмотрите на 2 колонки свёрстанных блоками.

Почему же так происходит?

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

Так что добиваться такого же результата при помощи блоков, какого добились и от таблиц мы будем, используя маленькие хитрости.

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

Посмотрим, как это выглядит на схеме.

Теперь давайте переходить непосредственно к коду.

Теперь разберём что к чему.

Далее создадим фоновое изображение. Ширина главного блока у нас будет равна 700 px. Следовательно и ширина фонового изображения будет равна 700px. Высоту можно задавать любую в зависимости от того, какой у вас фон.

Я создал такое изображение и назвал его textured. gif

Теперь смотрим, что получилось в CSS

#main {width:700px; margin:0 auto; background-image:url(textured.gif); background-repeat:repeat-y; }
#one {width:400px; float:left;}
#two {width:300px;}

Теперь если мы посмотрим на результат, то увидим следующие:

В заключение данного урока, для лучшего понимания я приведу пример с изменённым фоновым изображением.

Я создал вот такое фоновое изображение и назвал его textured1. gif

Естественно соответствующим образом изменил одно из свойств в CSS.

#main {width:700px; margin:0 auto; background-image:url(textured1.gif); background-repeat:repeat-y; }

Вот что получилось:

P.S. от Максима: данный эффект не работает у меня в Firefox.

• Перевод

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

Способ 1. Использование свойства display: table

• .....Lots of Content....


• .....Lots of content....


• .....Lots of content....

.base {
/*make it 100% width and a minimum of 1000px width*/
width: auto;
margin-left: 0px;
margin-right: 0px;
min-width: 1000px;
padding: 0px;
display:table;
}
.base-row {
Display: table-row;
}
.base li {
display: table-cell;
width: 33%;
}
.cell1 {
background-color: #f00;
}
.cell2 {
background-color: #0f0;
}
.cell3 {
background-color: #00f;
}

Преимущества:

Недостатки:

Способ 2: Использование JavaScript

… Lots Of Content …

…. Lots Of Content …

… Lots Of Content …

.container {
Width: 900px;
Margin-left: auto;
Margin-right: auto;
}
.leftsidebar {
Float: left;
Width: 33%;
}
.content {
Float: left;
Width: 33%;
}
.rightsidebar {
Float: left;
Width: 33%;
}

function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});

Преимущества:

Недостатки:

Способ 3: искусственные колонки

HTML код:

.container {
background-image: tile.png;
background-repeat: repeat-y;
width: 900px;
margin-left: auto;
margin-right: auto;

Leftsidebar {
float: left;
width: 200px;
}

Content {
float: left;
width: 400px;
}

Right {
float:left;
width: 300px;
}

Clearer {
clear: both;
}

Преимущества:

Недостатки:

Способ 4: Использование раздельных блоков с фоном

…Lots Of Content…

…Lots Of Content…

…Lots Of Content…

.rightback {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px; /* width of right sidebar */
}
.leftback {
width: 100%;
position:relative;
right: 400px; /* width of the content area */
float:left;
background-color: #f00;
}

Container {
width: 900px;
margin-left: auto;
margin-right:auto;
}

Leftsidebar {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

Content {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

Rightsidebar {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

1. .rightback, .contentback, и.leftback содержат элементы.leftsidebar, .content and .rightsidebar, которые, в свою очередь, содержат текст.
2. Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
   .leftback соотвествует.leftsidebar,
   .contentback – .content
   и.rightback – .rightsidebar.
3. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков
   задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере.contentback (отвечающего за фон.content) сдвинут влево на 300px (что является шириной блока.rightsidebar). (см. рис. ниже)
4. Колонки.leftsidebar, .content и.rightsidebar расположены друг за другом с определенной шириной.
5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны=ширина.rightsidebar (300px) и.content (400px) = 700px.(B+G)