CSS - столбцы одинаковой высоты?

Question

В CSS я могу сделать что-то вроде этого:

Но я не знаю, как изменить это на что-то вроде:

---

Возможно ли это с помощью CSS?

Если да, как я могу сделать это без явного указания высоты (пусть содержимое растет)?

Answer 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; Демо: 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/

Answer 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;
}

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

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

Answer 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;
}

Результат

Answer 4

Вы можете использовать таблицы 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>

Answer 5

Вы можете сделать это легко с помощью следующего 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;
};

Answer 6

Современный способ сделать это: 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 пикселей. Вместо того, чтобы сжиматься ниже 200px, он оборачивается ниже, так что он даже отзывчив. Вы также можете иметь любое количество столбцов, а не только 3. Они все будут хорошо вписываться.

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

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

Он чистый, читаемый, легко обслуживаемый, гибкий, а также простой в использовании!

Answer 7

Вот пример, который я только что написал в 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>

Примечание. Я нашел время для тестирования только в некоторых новых браузерах.Пожалуйста, проверьте это хорошо, прежде чем использовать его:)

Редактируемый пример в SCSS вы можете получить здесь: JSfiddle

Answer 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, это добавит больше кода, но если вы уже используете фреймворк, то они уже решили это.

Удачного кодирования.

Answer 9

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

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 тенденция довольно мала. Помешайте размеру этого окна, и вы увидите, что столбцы красиво переставляются, включая растяжение на полную высоту, когда они должны быть столбцами, чтобы их фоновые цвета не обрезались на полпути вниз по странице. Никаких сумасшедших взломов padding / margin, которые врезаются в более поздние тэги на странице, и не выбрасывание 5% ваших посетителей волкам.

Answer 10

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

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