Problème d'alignement flottant DIV

Question

J'ai une disposition fluide avec DIV de différentes hauteurs et largeurs, et je voudrais qu'ils soient alignés par des lignes, un peu comme quand vous faites une recherche sur istockphoto, sauf aligné vers le haut:

l'image ici ->http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1902.png

j'ai essayé flotter toutes les années DIV à gauche, mais ils ne sont pas correctement alignés en lignes:

l'image ici ->http://i207.photobucket.com/albums/bb121/jpbanks/Capturadepantalla2010-06-02alas1900.png

Voyez comment « Prueba "ne va pas tout le chemin vers la gauche? J'ai pensé à the jQuery plugin Masonry mais ce que je veux est évidemment différent. Toute solution utilisant CSS ou jQuery serait bien. Des idées?

Answer 1

J'ai trouvé une solution css-only encore meilleure. Tout ce que vous avez à faire est d'ajouter le CSS suivant pour les enfants DIV:

.box { 
    display: inline-block; 
    vertical-align: top; 
    float: none; 
} 

C'est tout! Tout ce que vous avez à faire est de les faire afficher comme des blocs en ligne au lieu de les positionner comme flottants DIV! Je ne peux pas croire que je ne l'ai pas compris avant ...

Answer 2

La clé est pour chaque objet d'avoir un div externe qui est de la même taille. Puis un div interne qui contient effectivement la photo. Ensuite, tout sera aligné correctement.

Answer 3

Prueba obtient « coincé » sur CMAS et la seule façon de le faire serait de choisir une taille standard div qui conviendra à toutes vos images ou divs ou autre chose. IE:

.wrap{width:200px;height:200px;float:left;} 
.inner{margin:0 auto;} 

html:

<div class="wrap"><img src="whatever" class="inner" /></div> 
<div class="wrap"><img src="anotherwhatever" class="inner" /></div> 

Answer 4

Vous pouvez utiliser this plugin pour donner à tous les divs la hauteur de la plus haute div. Cependant, dans IE, vous devez vous assurer que les images ont la hauteur définie. De plus, cela ne semble pas fonctionner par rangée, ce qui serait idéal. peut-être pouvez-vous le modifier selon vos besoins.

Answer 5

Ok, c'est donc ce que je fini par faire: En charge, je lance une boucle .each() jQuery pour chaque élément flottaient (chaque « de .rect »). Il détecte le premier élément de chaque ligne (en utilisant .position()) et ajoute une classe 'clear'. Ensuite, lorsque la fenêtre est redimensionnée, elle supprime toutes les classes 'clear' et effectue à nouveau la boucle .each().

Comme tant;

$('.rect').each(function() { 
    var este = $(this).position(); 
    var sig = $(this).next().position(); 
    if(este.left >= sig.left) { 
     $(this).next().addClass('clear'); 
    } 
}); 

$(window).resize(function() { 
    $('.rect').removeClass('clear'); 
    $('.rect').each(function() { 
     var este = $(this).position(); 
     var sig = $(this).next().position(); 
     if(este.left >= sig.left) { 
      $(this).next().addClass('clear'); 
     } 
    }); 
}); 

Le css:

.rect { 
    float: left; 
} 

.clear { 
    clear: left; 
} 

Et ça marche! Des commentaires/suggestions? Je pense à emballer cela dans un minuscule plugin. :)

Answer 6

Avez-vous essayé la maçonnerie? voir: http://jasondaydesign.com/masonry_demo