Faire des enfants divs la hauteur de la plus haute enfant

J'ai deux enfant <div> éléments à l'intérieur d'un conteneur parent <div> comme indiqué:

<div class="row">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

J'ai essayé le code CSS suivant:

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

Comment puis-je obtenir à la fois des enfants (div.item) à être à la hauteur de la plus haute enfant?

jsFiddle: http://jsfiddle.net/7m4f7/

InformationsquelleAutor Don P | 2013-05-16
  1. 19

    La seule solution est de changer l'affichage de la valeur de inline-block à table-cell pour le descendant div.item éléments:

    .row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
    background: rgba(0,0,0,0.1);
    display: table-cell;
}

    Exemple

    • Attention, table-cell est un css3 et ne fonctionne pas dans tous les navigateurs.
    • En fait le table-cell valeur a été introduit dans le CSS 2.1 Spécification
    • S'il vous plaît ajouter display: table et border-spacing: 20px 20px pour .ligne dans votre violon, rend les colonnes de plus en plus apparente, merci! jsfiddle.net/audetwebdesign/7m4f7/5
    • et pour ceux qui se demandent pourquoi cela ne fonctionne pas pour vous. assurez-vous que vous n'avez pas défini un flotteur à la règle. Vous pouvez avoir float: none Parce que parfois, nous utilisons des float pour éliminer retour chariot espaces avec inline-block.
    • Bravo à Jomar pour que le pourboire supplémentaire-- totalement aidé!
    InformationsquelleAutor Yana
  2. 9

    Une autre solution est d'utiliser flexbox: http://jsfiddle.net/7m4f7/4/

    .item {
    background: rgba(0,0,0,0.1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.row {
    border: 1px solid red;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

    Toutefois, le soutien est limité (mais de mieux en mieux!) Voir http://caniuse.com/flexbox

    Sinon, vous devez utiliser javascript pour définir les hauteurs manuellement.

    • étant donné qu'il fonctionne, supposons que j'ai beaucoup d'éléments enfants ont été divisés en différentes lignes lorsque j'ai utilisé inline-block mais maintenant, tout se met en peluche dans une ligne. Est-il un travail autour de pour que.
    • oui — utilisation flex-wrap: wrap; flex-direction: row;
    InformationsquelleAutor nullability
  3. 9

    la version jquery: VIOLON

    var maxheight = 0;

$('div div.y').each(function () {
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
});

$('div div.y').height(maxheight);

    EDIT: Viens de remarquer que vous n'êtes pas affaire avec la hauteur de <div>'s, mais <p>'s

    InformationsquelleAutor fnostro