Ответ 1

Flexbox

Если вы читаете это в конце 2013 года, у вас есть flexbox. Предполагая этот макет:

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

С flexbox столбцы с равной высотой - это всего лишь одно объявление:

.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}

Поддержка браузера: http://caniuse.com/flexbox; demo: http://jsfiddle.net/7L7rS/

Макет таблицы

Если вам все еще нужно поддерживать IE 8 или 9, вам нужно использовать таблицу:

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

Демо: http://jsfiddle.net/UT7ZD/

Ответ 2

Да.

Вот полный CSS, который использует статья. Стоит прочитать всю статью, поскольку автор шаг за шагом переходит к тому, что вам нужно для выполнения этой работы.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Это не единственный метод для этого, но это, вероятно, самый элегантный метод, с которым я столкнулся.

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

Ответ 3

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

Разметка

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

Результат

Ответ 4

Вы можете сделать это легко со следующим JavaScript:

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};

Ответ 5

Вы можете использовать таблицы CSS, например:

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>

Ответ 6

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

<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>

Ответ 7

Отзывчивый ответ:

CSS flexbox - это мило, но сегодня вырезать пользователей IE9 немного с ума. О наших свойствах по состоянию на 1 августа 2015 года:

3% IE9
2% IE8

Вырезание этих страниц показывает 5% сломанную страницу? Сумасшедший.

Используя медиа-запрос, как Bootstrap делает возвращается в IE8, как и display: table/table-cell. Итак:

http://jsfiddle.net/b9chris/bu6Lejw6/

HTML

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

Я использовал 400px в качестве переключателя между столбцами и вертикальной компоновкой в ​​этом случае, потому что jsfiddle panes тренда довольно мала. Повесьте размер этого окна, и вы увидите, что столбцы красиво перестраиваются, в том числе растягиваются до полной высоты, когда им нужно быть столбцами, чтобы их цвета фона не прерывались на части вниз. Никаких сумасшедших дополнений/маркеров, которые разбиваются на более поздние теги на странице и не бросают 5% ваших посетителей волкам.

Ответ 8

Другой вариант - использовать инфраструктуру, которая была решена. Bootstrap в настоящее время не имеет опции равной высоты, но Foundation by Zurb делает, и вы можете увидеть, как он работает здесь: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

Вот пример того, как вы его используете:

<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
</div>

В основном они используют javascript, чтобы проверить самый высокий элемент и сделать остальные одинаковыми.

Итак, если вы хотите просто css, это добавит больше кода, но если вы уже используете фреймворк, то они уже решили это.

Счастливое кодирование.

Ответ 9

Современный способ сделать это: CSS Grid.

HTML:

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

Живой пример здесь.

repeat(auto-fit, minmax(200px, 1fr)); устанавливает ширину столбцов. Каждый столбец занимает 1 часть доступного пространства, но не может быть меньше 200 пикселей. Вместо того, чтобы сокращаться ниже 200 пикселей, он обертывается ниже, поэтому он даже реагирует. У вас также может быть любое количество столбцов, а не только 3. Они будут хорошо вписываться.

Если вам нужно ровно 3 столбца, используйте grid-template-columns: repeat(3, 1fr);. У вас все еще может быть больше элементов, они будут обертываться, быть отзывчивыми, но всегда размещаться в 3-х столбчатых макетах.

Подробнее о CSS Grid на MDN или css-tricks.

Это чистая, читаемая, удобная, гибкая и простая в использовании!

Ответ 10

Вот пример, который я только что написал в SASS с переменным столбцом и количеством столбцов (переменные):

CSS

.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.fauxer {
  overflow: hidden; }

.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }

.fauxer > div > div {
  display: table-row; }

.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }

<div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>