DIV égale hauteur à l'intérieur flottaient « ligne »

Ok, donc j'ai ce code:DIV égale hauteur à l'intérieur flottaient « ligne »

<div class='layout' style='width: 500px;'> 
    <div class='layout_frame' style='width: 300px;'></div> 
    <div class='layout_frame' style='width: 200px;'></div> 
    <div class='layout_frame' style='width: 100px;'></div> 
    <div class='layout_frame' style='width: 300px;'></div> 
    <div class='layout_frame' style='width: 100px;'></div> 
</div>

Ok, donc chaque DIV ci-dessus flottaient à gauche, donc ce que je reçois est deux « lignes » de DIV, ci-dessus rangée contenant les deux premiers, le second les trois derniers DIVs, non? Ok, donc chaque "layout_frame" peut contenir n'importe quel contenu, donc ils seront de taille différente, mais je veux que la hauteur soit égale à l'intérieur de la ligne. Donc, les deux premiers devraient peut-être être tous les deux 800px, et le troisième devrait être, par exemple, 200px - basé sur le plus grand DIV dans la "rangée".

Je suis en utilisant la position jQuery() pour savoir quels sont ceux qui sont dans la même ligne, avec ce code:

var rows = new Array(); 
$("div.layout_frame").each(function(){ 
    var pos = $(this).offset().top; 
    var height = $(this).height(); 
    if (height > rows[pos]){ 
     rows.pos = height; 
    } 
});

Mais c'est aussi loin que je suis venu. Je mets "pos" à, disons "124" qui devrait être égal pour les deux premiers et pas pour les trois derniers. Mais chaque "groupe" de DIVS devrait avoir la même hauteur, basée sur le plus grand. J'espère vraiment que j'ai expliqué cela correctement. Toute aide est appréciée

Source

2009-10-01 Sandman

Salut, Lorsque j'utilise votre code, je reçois 3 lignes: la première avec div1, le second avec div2 et div3, le troisième avec div4 et div5 (divx avec x comme numéro de commande) ... Pourriez-vous s'il vous plaît poster votre css? – enguerran

POURQUOI êtes-vous si déterminé à avoir tous les divs internes dans une seule div extérieure? Y a-t-il une raison spécifique pour laquelle vous devez faire cela? En divisant chaque 'ligne' en une div indépendante, les choses seront sûrement plus faciles à contrôler? – belugabob

vous feriez mieux de le poser comme ceci:

<div class='layout' style='width: 500px;'> 
    <div class='layout_frame' style='width: 300px;'></div> 
    <div class='layout_frame' style='width: 200px;'></div> 
</div> 
<div class='layout' style='width: 500px;'> 
    <div class='layout_frame' style='width: 100px;'></div> 
    <div class='layout_frame' style='width: 300px;'></div> 
    <div class='layout_frame' style='width: 100px;'></div> 
</div>

puis en regardant l'enfant selon div de chaque mise en page a la plus grande hauteur, et mettre tous à cette hauteur.

Source

2009-10-01 13:31:24 GSto

Non, je ne le ferai pas de cette façon. Je veux le résoudre à partir de l'explication dans mon OP, mais merci quand même – Sandman

Mais son chemin a plus de sens et serait plus facile ... – qui

Je pense que vous devez répondre à l'OP, car vous ne connaissez pas le problème exact qu'il est en train de résoudre. aussi son problème est mon problème et votre solution ne fonctionne pas pour moi non plus. –

Pour le moment, j'ai ce code correspondant à vos besoins: Je mettrai à jour le code selon vos souhaits.

<html> 
<head> 
<title>frame layout</title> 
<style type="text/css"> 
div 
{ 
    border: 1px solid black; 
    height: 25px; 
    float: left; 
} 
.layout 
{ 
    border: 2px solid red; 
} 
</style> 
</head> 
<body> 

<div class='layout' style='width: 500px;'> 
    <div class='layout_frame' style='width: 300px;'>div1</div> 
    <div class='layout_frame' style='width: 200px;'>div2</div> 
    <div class='layout_frame' style='width: 100px;'>div3</div> 
    <div class='layout_frame' style='width: 300px;'>div4</div> 
    <div class='layout_frame' style='width: 100px;'>div5</div> 
</div> 
</body> 
</html>

Source

2009-10-01 13:42:55 enguerran

Cela casse la DIV dans deux parents, et en tant que tel n'est pas quelque chose que je peux utiliser. Ceux-ci sont tous dans le même DIV – Sandman

Ok, je l'ai changé ... Peut être vous pouvez ajouter une autre classe (class = 'layout_frame div1_height' et class = 'layout_frame div2_height') pour changer de la même façon les deux ensembles de div (en utilisant javascript pour changer les valeurs css)? – enguerran

Eh bien, la largeur est dynamique, alors peut-être que l'un des DIVS va grossir et rétrécir alors que DIV3 va tout à coup dans la ligne 1, tout est dynamique, donc j'ai besoin de mettre à jour les hauteurs. – Sandman

Vous pouvez le faire comme ça (remplacer votre jQuery avec les éléments suivants):

$(document).ready(function() { 

    var currentTallest = 0; 
    var currentRowStart = 0; 
    var rowDivs = new Array(); 

    $('div.layout_frame').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); 

    }); 

});

Source

2011-01-25 15:24:47 HardlyNoticeable

Yup, ça y est! Merci! –

Si vous souhaitez également redimensionner les colonnes au fur et à mesure que vous redimensionnez la fenêtre (et forcer les éléments à remonter), vous pouvez consulter mon article sur l'extension de cette solution: http://stephenakins.blogspot.com/2011 /01/uniform-div-heights-for-liquid-css-p.html – HardlyNoticeable

Extrait de: http://css-tricks.com/equal-height-blocks-in-rows/ –

DIV égale hauteur à l'intérieur flottaient « ligne »

Répondre

Questions connexes