В CSS я могу сделать что-то вроде этого:
Но я не знаю, как изменить это на что-то вроде:
Возможно ли это с помощью CSS?
Если да, как я могу это сделать без явного указания высоты (пусть контент растет)?
CSS - Столы с одинаковой высотой?
Ответ 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 */
}
Ответ 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>