Comment puis-je appliquer des hauteurs égales aux DIVs flottantes dans ce cas?

Je suis en train d'analyser dynamiquement les DIV qui flottent les unes à côté des autres dans deux colonnes. Le problème maintenant que si n'importe quel DIV a plus de contenu/hauteur que l'autre, la page semble malpropre car il n'y a pas de compensation pour les flottants.Comment puis-je appliquer des hauteurs égales aux DIVs flottantes dans ce cas?

Je demande comment puis-je faire en sorte que tous les DIV aient la même hauteur? (Tous les DIVS ont une classe spécifique comme ce .cat-widget) Je veux juste qu'ils soient de même hauteur pour flotter sans problème et s'aligner parfaitement sur la page.

Toutes les suggestions, les meilleures pratiques pour le faire s'il vous plaît faites le moi savoir.

Source

2010-12-02 Ahmad Fouad

Tu ne peux pas définir une hauteur explicite pour une classe à appliquer aux divs? – Kyle

Je ne peux pas. Le contenu est dynamique et variable. Sinon, je pourrais juste avoir une hauteur fixe pour la classe donnée –

Cette solution fonctionne à merveille:

<div style='display:table'> 
    <div style='display:table-row'> 
    <div style='display:table-cell'>..content..</div> 
    <div style='display:table-cell'>..content..</div> 
    </div> 
</div>

MISE À JOUR

Working example here et le tutoriel here. Juste testé en travaillant sur FF 3.6, IE8, Chrome 7 et Safari $.

Source

2010-12-02 08:51:21 Ben

Wow .. est-ce compatible cross-browser? Parce que cela fonctionne! –

Vous pourriez aussi bien utiliser une table si;) –

Cette question vous est utile? Both columns same height as deepest column?

Source

2010-12-02 08:31:49 z00bs

appliquent height et overflow:hidden à tous les divs

Source

2010-12-02 08:32:49 ArK

Le contenu est dynamique, donc je ne peux pas définir une hauteur fixe. c'est pourquoi –

J'utilise en fait, au besoin:

<div class="somename" style="min-height: 300px;">

Source

2010-12-02 08:47:43 422

Le contenu est dynamique, je ne peux pas savoir avec certitude ce que l'utilisateur mettra dans le widget, la hauteur est variable. :( –

Une solution Javascript, vous pouvez replier sur est:

// get both heights 
var heightFirst = document.getElementById('....').offsetHeight; 
var heightSecond = document.getElementById('....').offsetHeight; 

// find largest 
var maxHeight = Math.max(heightFirst, heightSecond); 

// set both to largest 
document.getElementById('....').style.height = maxHeight + 'px'; 
document.getElementById('....').style.height = maxHeight + 'px';

Il y a aussi quelques solutions CSS détaillées ici: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

Source

2010-12-02 09:58:17 diolemo

Comment puis-je appliquer des hauteurs égales aux DIVs flottantes dans ce cas?

Répondre

Questions connexes