it-swarm.com.ru

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

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

альтернативный текст http://pici.se/pictures/qJRMtoLPv.png

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

99
Deniz Dogan

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

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

154
Natalie Downe

Это 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 .

94
Dmitry Leskov

Вы должны использовать 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.
}
17
Luca Steeb

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

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
10
Andi P. Trix

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

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


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

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

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

5
Philippe Leybaert

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

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

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

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

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

4
Mr Br

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

Это работает для меня в IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Также работает в IE 6, если вы раскомментируете более понятный div в нижней части . Edit : как сказала Натали Даун, вы можете просто добавить width: 100%; в #container вместо этого.

<!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>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

Я не знаю способа CSS для вертикального центрирования текста в правильном div, если div не имеет фиксированной высоты. Если это так, вы можете установить line-height в то же значение, что и высота div, и поместить внутренний div, содержащий ваш текст, с помощью display: inline; line-height: 110%.

1
instanceof me

Используя 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
Quintox303

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

1
Calin Don

Используя свойство 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>

0
user5139166

Используя JS, используйте data-same-height="group_name" во всех элементах, которые вы хотите иметь одинаковые height.

Пример: https://jsfiddle.net/eoom2b82/

Код:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].Push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});
0
Wiliam

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

hTML

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

cSS

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}
0
this guy