web-dev-qa-db-fra.com

CSS faisant deux divs de hauteur égale avec table d'affichage

Dans le code HTML suivant, les div .left et .right ont des hauteurs différentes. Est-il possible de faire les deux div même hauteur sans définir la hauteur. J'ai essayé d'utiliser display: table mais ne fonctionne pas.

HTML: 

<div class="wrap">

    <div class="left">
       Lorem    
    </div>

    <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

</div>

CSS: 

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}


.left{
    width:100px;
    float:left;
    display: table-cell;
    border-bottom:1px solid green;    
}


.right{
    width:150px;
    float:left;
    border-bottom:1px solid red;
    display: table-cell;     
}

jsfiddle: http://jsfiddle.net/fJbTX/1/

htmlcsscss-tables
14
user1355300

Supprimez le float, qui retire les éléments du flux normal du document, et ajoutez également un autre élément wrapper, pour agir comme table-row:

table-cell, se comporte comme le <td> Élément HTML

Ce qui implique que cela nécessite (même si je n'ai pas vérifié mon inférence) un display: table-row parent, car un td nécessite un élément parent tr.

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}

.row {
    display: table-row;
}
.left{
    width: 50%;
    display: table-cell; 
    background-color: #0f0;
}


.right{
    width: 50%;
    background-color: #f00;
    display: table-cell;     
}​

JS Fiddle .

Références:

23
David Thomas

Quelque chose comme ça?

http://jsfiddle.net/fJbTX/3/

J'ai sorti la propriété float

5
Huangism