Comment puis-je forcer une DIV flottante à correspondre à la hauteur d'une autre DIV flottante?

si vous essayez de forcer une div flottante à correspondre à une autre pour créer un effet de colonne, c'est ce que je fais. Je l'aime parce que c'est simple et propre.

<div style="background-color: #CCC; width:300px; overflow:hidden; ">
    <!-- Padding-Bottom is equal to 100% of the container's 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>

je pense que c'est logique. Il semble bien fonctionner, même avec du contenu dynamique.

voici un plugin jQuery pour définir les hauteurs de divs multiples pour être les mêmes. Et voici le code réel du plugin.

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

la solution correcte pour ce problème est d'utiliser display: table-cell

Important: Cette solution n'a pas besoin de float puisque table-cell transforme déjà le div en un élément qui s'aligne avec les autres dans le même conteneur. Cela signifie également que vous n'avez pas à vous soucier de nettoyer les flotteurs, débordement, arrière-plan brillant à travers et toutes les autres mauvaises surprises que le float hack apporte à la partie.

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>

Related:

• jsfiddle
• utilisant CSS" display: table-cell "pour les colonnes

Vous devez envelopper dans un div sans flotteur.

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

j'utilise aussi le patch clearfix ici http://www.webtoolkit.info/css-clearfix.html

Je ne comprends pas pourquoi cette question Est pilonnée dans le sol alors qu'en 30 secondes vous pouvez coder une table à deux colonnes et résoudre le problème.

ce problème de hauteur de colonne div se pose sur une disposition typique. Pourquoi recourir au script quand une simple vieille étiquette HTML de base le fera? À moins qu'il y ait des tables énormes et nombreuses sur une disposition, Je ne crois pas à l'argument que les tables sont significativement plus lentes.

Flex le fait par défaut.

<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/

BONUS: lignes multiples

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

je vous recommande de les envelopper tous les deux dans une div externe avec la couleur de fond désirée.

vous pouvez toujours utiliser une image de fond pour le faire aussi. J'ai tendance à voter pour cette option 100% du temps car la seule autre solution parfaite est L'option Jquery.

comme avec l'utilisation de la div externe avec une couleur de fond, vous finirez par avoir le contenu dans les deux divs atteignant la même hauteur.

ce code vous permettra d'avoir un nombre variable de rangées (avec un nombre variable de DIVs sur chaque rangée) et il fera que toutes les DIVs sur chaque rangée correspondent à la hauteur de son plus haut voisin:

si nous avons supposé que toutes les DIVs, qui sont flottantes, sont à l'intérieur d'un conteneur avec le id "divContainer", alors vous pouvez utiliser ce qui suit:

$(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's 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);

});
});

ayant eu le même type de problème aussi bien, nécessitant trois divs à côté de l'autre avec un contenu différent, avec des bordures à droite pour les "séparer", la seule solution qui a fonctionné était une version légèrement modifiée de l'option jQuery dans une autre réponse. Rappelez-vous que vous avez également besoin du script trouvé ici .

ci-dessous est ma version légèrement modifiée du script, qui permet juste un vrai réglage de min-height (comme j'avais besoin de mes boîtes pour être à moins d'une certaine hauteur).

/*--------------------------------------------------------------------
 * 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;
};

Il fonctionne comme un charme et ne ralentit pas n'importe quoi :)