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

StackOverflow https://stackoverflow.com/questions/1205159

  •  05-07-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

Вы можете получить столбцы одинаковой высоты в 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 включить, чтобы очистить внутренние поплавки контейнера.Если вы используете overflow hidden, это очищает значения с плавающей точкой во всех браузерах, отличных от IE, а затем просто добавление чего-либо для предоставления hasLayout, такого как width или zoom: 1, приведет к тому, что IE очистит свои внутренние значения с плавающей точкой.

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

Я надеюсь, что это поможет.

Другие советы

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

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

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

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

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

вы можете заставить это работать с js: 

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

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

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

<Ч>

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

  

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

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

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

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

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

.

<код> $ ( 'меньше-ДИВ ') CSS (' высота', $ () CSS ( 'высота ')' выше-DIV.'.);

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

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

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

Также работает в IE 6, если вы раскомментируете более понятный div в нижней части. Изменить : как сказала Натали Даун, вместо этого вы можете просто добавить 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; высота строки: 110% .

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

С " оставленным " и "правильно" быть идентификаторами тегов div.

Используя css-свойство --> отобразить:таблица-ячейка

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>

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>

Используя JS, используйте data-same-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();
});

Мне нужно было сделать что-то подобное, вот моя реализация.Подводя итог цели, можно сказать, что 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%;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top