HTML / CSS: создание двух плавающих элементов одинаковой высоты - PullRequest
Новая
       33

HTML / CSS: создание двух плавающих элементов одинаковой высоты

103 голосов
/ 30 июля 2009

У меня есть небольшая странная проблема, которую я сейчас решаю с помощью table, см. Ниже. По сути, я хочу, чтобы два элемента div занимали 100% доступной ширины, но занимали столько вертикального пространства, сколько необходимо (что на самом деле не так очевидно из рисунка). Оба должны всегда иметь одинаковую высоту с небольшой линией между ними, как показано.

alt text
(источник: pici.se )

Все это очень легко сделать с помощью table, что я сейчас и делаю. Однако я не слишком заинтересован в решении, так как семантически это на самом деле не таблица.

Ответы [ 13 ]

154 голосов
/ 30 июля 2009

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

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

Я думаю, что стоит упомянуть, что предыдущий ответ от streetpc имеет недопустимый html, тип документа - XHTML, и вокруг атрибутов есть одинарные кавычки. Также стоит отметить, что вам не нужен дополнительный элемент с clear, чтобы очистить внутренние поплавки контейнера. Если вы используете переполнение скрытое, это очищает плавающие элементы во всех браузерах, отличных от IE, а затем просто добавляет что-то, чтобы дать hasLayout, например width или zoom: 1, заставит IE очистить свои внутренние плавания.

Я проверял это во всех современных браузерах FF3 + Opera9 + Chrome Safari 3+ и IE6 / 7/8. Это может показаться уродливой уловкой, но она хорошо работает, и я часто использую ее в производстве.

Надеюсь, это поможет.

97 голосов
/ 18 июля 2012

Это 2012 год + n, поэтому, если вам больше не нужны IE6 / 7, display:table, display:table-row и display:table-cell работают во всех современных браузерах:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Обновление 2016-06-17: Если вы считаете, что пришло время для display:flex, посмотрите Flexbox Froggy .

18 голосов
/ 11 сентября 2015

Вы должны использовать flexbox для достижения этой цели. Он не поддерживается в IE8 и IE9 и только с префиксом -ms в IE10, но все остальные браузеры поддерживают его. Для префиксов поставщиков вы также должны использовать autoprefixer . 

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
10 голосов
/ 18 сентября 2013

Вы можете получить это, работая с JS: 

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
5 голосов
/ 30 июля 2009

Это классическая проблема в CSS. На самом деле для этого нет решения.

Эта статья из A List Apart - хорошее чтение по этой проблеме. Он использует технику, называемую «искусственные столбцы», основанную на наличии одного вертикально мозаичного фонового изображения на элементе , содержащем столбцы , который создает иллюзию столбцов одинаковой длины. Поскольку он находится в оболочке плавающих элементов, он равен длине самого длинного элемента.

У редакторов A List Apart есть эта заметка к статье:

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

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

4 голосов
/ 07 апреля 2013

У меня была похожая проблема, и, на мой взгляд, лучший вариант - это использовать немного javascript или jquery.

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

С jquery и 2 делениями это очень просто, вот пример кода:

$('.smaller-div').css('height',$('.higher-div').css('height'));

И, наконец, есть 1 последнее. Их отступы (верх и низ) должны быть одинаковыми! Если у вас есть большие отступы, вы должны устранить разницу в отступах.

1 голос
/ 14 ноября 2016 

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>
1 голос
/ 03 июня 2016

Используя свойство css -> display: table-cell 

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>
1 голос
/ 14 ноября 2014

Используя Javascript, вы можете сделать два тега div одинаковой высоты. Меньший элемент div будет соответствовать высоте самого высокого тега div, используя код, показанный ниже: 

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

С "left" и "right" - это идентификаторы тегов div.

1 голос
/ 30 июля 2009

Насколько я знаю, вы не можете сделать это, используя текущие реализации CSS. Чтобы сделать два столбца равными по высоте, вам нужен JS.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...