même hauteur de colonnes avec 960.gs ?

Question

J'ai 4 colonnes sur une ligne et selon la quantité d'informations que je mets dans chacune d'entre elles, elles auront des hauteurs différentes. vous pouvez le voir si vous mettez une couleur d'arrière-plan sur ces colonnes.

Comment donner aux autres colonnes la hauteur de la colonne ayant la plus grande hauteur ?

Answer 1

Vous pouvez utiliser jQuery pour ce faire. http://www.cssnewbie.com/equal-height-columns-with-jquery/

Alternativement, pour une approche CSS uniquement, vous pouvez donner l'impression qu'elles sont de la même hauteur, en enveloppant toutes les colonnes dans une div, puis en appliquant une image de fond unique, avec 4 blocs de couleur qui correspondent à la largeur des colonnes.

Cette div enveloppante s'étendra jusqu'à atteindre la taille de la plus grande colonne et donnera l'impression de 4 colonnes de taille égale.

Answer 2

Je ne sais pas si cela fonctionne pour le 960, mais dans Blueprint, vous pouvez obtenir cela en appliquant le style suivant aux colonnes :

padding-bottom : 20000px;
margin-bottom : -20000px;
overflow:hidden;

Answer 3

Vous pouvez utiliser la propriété CSS affichage : table-cell

http://jsfiddle.net/AGjBM/

<style>
    div.table-cell {
        display: table-cell;
        border: 1px solid;
    }
</style>

    <div class="table-cell">
        Some Text
    </div>
    <div class="table-cell">
        Some Text<br>
        Some More Text
    </div>