Css все блоки одного размера

Как сделать высоту блоков одинаковой

Здравствуйте, помогите выстроить блоки в нужной последовательности.
В основном блоке, с шириной 1280px, нужно вместить в ряд 3 блока, так чтобы ширина всех 3 блоков была одинакова а высота всех 3 блоков равнялась максимальной высоте одного из блоков. Я сделал при помощи float:left но высота всех блоков получается разная из-за разной информации внутри каждого блока. Пример на рисунке, красное как получается у меня, серое это что я хочу добиться. Спасибо.

Как можно поддерживать высоту одинаковой для каждого из блоков?
Доброго времени суток! В коде ниже три блока, как три колонки: левый, центральный (основной, более.

Как сделать одинаковую высоту блоков?
делаю адаптивную верстку есть два блока сфлоаченых влево. Один при наполнении контентом становиться.

Как подогнать высоту блоков? (Bootstrap)
Ниже приведу код верстки и скриншот, на котором указаны нюансы. Основной вопрос — как подогнать.

Как вывести высоту блоков?
Допустим есть два блока div с класcом ggg1, и у них разная высота. Как вывести за раз их высоту? .

1 2 3 4 5 6 7 8 9 10 11 12 13

.wrapper{ width:1280px; border:1px solid #ccc; text-align:center; margin:20px auto; } .block{ display:inline-block; width:33%; background:green; vertical-align:top; margin-bottom:5px; }

div class="wrapper"> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> /div>

div class="wrapper"> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> div class="block">Текстbr>Текстbr>Текст/div> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13

.wrapper{ width:1280px; border:1px solid #ccc; text-align:center; margin:20px auto; } .block{ display:inline-block; width:33%; background:green; vertical-align:top; margin-bottom:5px; }

1 2 3 4 5 6 7 8 9 10 11 12 13

.table { display: table; width:1280px; border:1px solid black; } .row { display: table-row; } .cell { padding:5px; display:table-cell; border:1px solid #ccc; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

div class="table"> div class="row"> div class="cell">Текстbr>Текстbr>Текст/div> div class="cell">Текстbr>Текст/div> div class="cell">Текстbr>Текстbr>Текст/div> /div> div class="row"> div class="cell">Текстbr>Текстbr>Текст/div> div class="cell">Текстbr>Текстbr>Текст/div> div class="cell"Текстbr>Текстbr>Текст/div> /div> div class="row"> div class="cell">Текстbr>Текст/div> div class="cell">Текстbr>Текстbr>Текст/div> div class="cell">Текстbr>Текстbr>Текст/div> /div> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

 html lang="en"> head> meta charset="UTF-8"> title>Document/title> style> .wrap < display: table; width: 1280px; >.wrap .row < display: table-row; >.wrap .block < display: table-cell; background: #1f0; width: 33.33333333%; >/style> /head> body> div class="wrap"> div class="row"> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, fuga!/div> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, ducimus./div> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nam perspiciatis suscipit rem quasi voluptates ratione odio ad tenetur repudiandae./div> /div> div class="row"> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, quam./div> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, a, vel? Placeat repellat, temporibus reiciendis nesciunt voluptates reprehenderit quod! Accusamus sint nihil voluptates hic, amet temporibus ad id maxime vero./div> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, neque!/div> /div> div class="row"> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur mollitia quia quasi voluptate libero minus eum id illo architecto consequuntur./div> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, alias./div> div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, doloremque./div> /div> /div> /body> /html>

Источник

4 способа как создать блоки одинаковой высоты

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

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

Для реализации макета используется список ( ul ) или блок div с вложенными в него блоками для строки и каждой из колонок. Обрамляющему блоку div присваивается значение display: table , а каждому вложенному блоку-колонке значение display: table-cell .
Рассмотрим пример со списком.
HTML код:

.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;
>

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

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

Недостатки:

Этот метод не работает в браузерах IE7 и ниже. Пройдет немало времени (когда IE7 станет новым IE6), прежде чем мы сможем без опаски использовать этот метод.

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

Этот метод основан на использовании небольшого JS кода (JQuery), который “расставляет” нужную высоту каждой колонке на основе высоты наиболее длинной из них.
HTML код:

.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»));
>);

Вы можете положить JS код в отдельный файл и вызвать его непосредственно в HTML коде. В этом случае, инициализация JQuery должна быть по коду расположена выше.
Код, который вам нужно изменить – это название класса блока, который создает колонки. В данном примере это класс container :

Вы можете изменить название класса блока с колонками или, даже, добавить класс к каждому блоку-колонке и использовать их раздельно, для удобства.

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

Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с CSS кодом для выравнивания высоты.

Недостатки:

Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.

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

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

.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;
>

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

Недостатки:

Этот метод можно использовать только для макетов/колонок фиксированной ширины.

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

Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает.
HTML код:

.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;
>

Выглядит не просто, не так ли? Главное уяснить 5 основных моментов:

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)

На рисунке ниже изображено как располагаются блоки .rightback, .contentback и.leftback. Крайний слева – .rigthback, крайний справа — .leftback.

Пунктирная линия показывает видимую область колонок (блок .rightback обрезан с помощью overflow: hidden).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соотвествующая ширина.
Все 3 элемента имееют смещение слева от C, с помощью relative position.
C = B+G

Этот метод подробно описывается в этой статье.

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

Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.

Недостатки:

Метод не так прост, как остальные, однако, он позволяет создать столько равных по высоте колонок, сколько требуется.

Вывод

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

Источник