Как я могу заставить плавающий DIV соответствовать высоте другого плавающего DIV?

Ответ 1

Оберните их в содержащий div с цветом фона, применяемым к нему, и после столбца вы можете очистить div.

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

Обновлено для рассмотрения некоторых комментариев и моих собственных мыслей:

Этот метод работает, потому что, по сути, это упрощение вашей проблемы, в этом несколько "старом" методе я помещаю два столбца, за которым следует пустой элемент очистки, задание элемента очистки - это указать родительскому (с фоном) это то место, где заканчивается плавающее поведение, это позволяет родительскому объекту существенно визуализировать 0 пикселей высоты в позиции прозрачного элемента, который будет тем, что будет самым высоким, чем раньше плавающий элемент.

Причиной этого является обеспечение того, чтобы родительский элемент был как высокий, чем самый высокий столбец, тогда фон устанавливается на родительском, чтобы придать виду, что оба столбца имеют одинаковую высоту.

Следует отметить, что этот метод является "oldskool", потому что лучшим выбором является запуск такого поведения расчета высоты с помощью чего-то вроде clearfix или просто переполнением: скрытым в родительском элементе.

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

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

Вам потребуется переполнение, скрытое в родительском объекте, но результат будет заключаться в том, что каждый столбец будет запрашивать эту дополнительную высоту, предложенную пометкой, но на самом деле не запрашивать макет такого размера (поскольку отрицательный маркер подсчитывает расчет).

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

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

Вы можете увидеть пример этой техники на веб-сайте bowers and wilkins (см. четыре горизонтальных прожектора в нижней части страницы).

Ответ 2

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

<div style="background-color: #CCC; width:300px; overflow:hidden; ">
    <!-- Padding-Bottom is equal to 100% of the container size, Margin-bottom hides everything beyond
         the container equal to the container size. This allows the column to grow with the largest
         column. -->
    <div style="float: left;width: 100px; background:yellow; padding-bottom:100%; margin-bottom:-100%;">column a</div>
    <div style="float: left;width: 100px;  background:#09F;">column b<br />Line 2<br />Line 3<br />Line 4<br />Line 5</div>
    <div style="float:left; width:100px; background: yellow; padding-bottom:100%; margin-bottom:-100%;">Column C</div>
    <div style="clear: both;"></div>
</div>

Я думаю, что это имеет смысл. Кажется, что он хорошо работает даже с динамическим контентом.

Ответ 3

Вот плагин jQuery, чтобы установить высоты нескольких divs одинаковыми. И ниже приведен фактический код плагина.

$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
    if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};

Ответ 4

Правильное решение этой проблемы - использовать display: table-cell

Важно: для этого решения не требуется float, так как table-cell уже превращает div в элемент, который совпадает с другими в одном контейнере. Это также означает, что вам не нужно беспокоиться об очистке поплавков, переполнении, сиянии фона и всех других неприятных сюрпризах, которые взломат float для вечеринки.

CSS

.container {
  display: table;
}
.column {
  display: table-cell;
  width: 100px;
}

HTML:

<div class="container">
    <div class="column">Column 1.</div>
    <div class="column">Column 2 is a bit longer.</div>
    <div class="column">Column 3 is longer with lots of text in it.</div>
</div>

по теме:

• jsfiddle
• Использование CSS "display: table-cell" для столбцов

Ответ 5

Вы должны обернуть их в div без float.

<div style="float:none;background:#FDD017;" class="clearfix">
    <div id="response" style="float:left; width:65%;">Response with two lines</div>
    <div id="note" style="float:left; width:35%;">single line note</div>
</div>

Я также использую патч clearfix здесь http://www.webtoolkit.info/css-clearfix.html

Ответ 6

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

Эта проблема с высотой столбца столбца возникает во всем типичном макете. Зачем прибегать к написанию сценариев, когда это сделает простой старый HTML-тег? Если на макете нет огромных и многочисленных таблиц, я не покупаю аргумент, что таблицы значительно медленнее.

Ответ 7

Flex делает это по умолчанию.

<div id="flex">
 <div id="response">
 </div> 
 <div id="note">
 </div>
</div>   

CSS:

#flex{display:flex}
#response{width:65%}
#note{width:35%}

https://jsfiddle.net/784pnojq/1/

БОНУС: несколько строк

https://jsfiddle.net/784pnojq/2/

Ответ 8

Я рекомендую вам обернуть их как в внешний div с желаемым цветом фона.

Ответ 9

Вы также можете использовать фоновое изображение для этого. Я склонен голосовать за этот вариант в 100% случаев, поскольку единственным идеальным решением является вариант JQuery.

Как и при использовании внешнего div с фоновым цветом, вы должны будете иметь содержимое в обоих div, достигая одной высоты.

Ответ 10

Имея такую ​​же проблему, требуя трех разделов рядом друг с другом с другим контентом, с правосторонними границами, чтобы "разделить" их, единственным решением, которое работало, была слегка измененная версия опции jQuery в другой ответ. Помните, что вам также нужен script найденный здесь.

Ниже приведена моя слегка измененная версия script, которая просто позволяет установить истинную настройку минимальной высоты (так как мне нужны мои ящики, чтобы быть как минимум определенной высотой).

/*--------------------------------------------------------------------
 * JQuery Plugin: "EqualHeights"
 * by:    Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2008 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description:   Compares the heights or widths of the top-level children of a provided element
                  and sets their min-height to the tallest height (or width to widest width). Sets in em units
                  by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method    (article:
                  http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
 * Usage Example: $(element).equalHeights();
                  Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
                  Optional: to specify an actual min-height (in px), pass an integer value, regardless of previous parameter: $(element).equalHeights(false,150);
 * Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/

$.fn.equalHeights = function(px,minheightval) {
    $(this).each(function(){
        if (minheightval != undefined) { 
            var currentTallest = minheightval;    
        } 
        else { 
            var currentTallest = 0;
        }
        $(this).children().each(function(i){
            if ($(this).height() > currentTallest) { 
                currentTallest = $(this).height();
            }
        });
        if (!px || !Number.prototype.pxToEm) 
            currentTallest = currentTallest.pxToEm(); //Use ems unless px is specified.
        // For Internet Explorer 6, set height since min-height isn't supported.
        if ($.browser.msie && $.browser.version == 6.0) { 
            $(this).children().css({'height': currentTallest});
        }
        $(this).children().css({'min-height': currentTallest});
    });
    return this;
};

Он работает как шарм и ничего не замедляет:)

Ответ 11

Этот код позволит вам иметь переменное количество строк (с переменным числом DIV в каждой строке), и это сделает все DIV в каждой строке совпадающими с высотой самого высокого соседа:

Если мы предположили, что все DIV, которые являются плавающими, находятся внутри контейнера с id "divContainer", тогда вы можете использовать следующее:

$(document).ready(function() {

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

$('div#divContainer div').each(function(index) {

    if(currentRowStart != $(this).position().top) {

        // we just came to a new row.  Set all the heights on the completed row
        for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

        // set the variables for the new row
        rowDivs.length = 0; // empty the array
        currentRowStart = $(this).position().top;
        currentTallest = $(this).height();
        rowDivs.push($(this));

    } else {

        // another div on the current row.  Add it to the list and check if it taller
        rowDivs.push($(this));
        currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);

    }
    // do the last row
    for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

});
});