j'ai une galerie d'image dynamique pour afficher, en utilisant PHP ...Positionnement CSS avancé. Disposition automatique sur la grille
Mon PROB
le style & positionnement devrait être que s'il n'y a pas assez d'espace pour l'ensemble div, comme dans l'image ci-dessus, les DIVs de la rangée doivent les placer comme le
suivant centrée et équi ... lointain
here is JS-Fiddle jeu de modèle de base, si quelqu'un veut essayer quelque chose sur jsFiddle
vous pouvez réaliser tout cela simplement la propriété de largeur css pour div
#div {
width:500px;
}
Nous avons mis à peu près la même chose ici
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158
ici aussi, vous pouvez basculer entre la vue de la grille et la vue normale, tout ce que nous jouons autour est avec divs largeur
http://www.allposters.com/-st/Animal-Posters_c622_.htm
n'est pas ce que veut le PO. Votre exemple n'a toujours que 3 images d'affilée, mais l'OP souhaite que le nombre d'images s'ajuste en fonction de la largeur du navigateur. – casablanca
en utilisant window.width ou document.width nous pouvons calculer ces choses aussi – kobe
ne nous avons quelque chose comme 'float: justify' :) – Moon
Google avait le même problème avec leur recherche d'image ... ils ont dû le surmonter avec des scripts de fantaisie. En regardant la source, chaque rangée d'images est <ul> à l'intérieur d'un <span>, et chaque image est dans un <li>. Ensuite, lorsque vous redimensionnez la fenêtre, les images sont déplacées d'un <ul> à un autre. C'est la meilleure méthode qu'ils pourraient trouver, apparemment.
Ainsi, en utilisant jQuery:
blocksPerRow = Math.floor($('#container').width()/blockWidth);
$('.row ul').each(function() {
while ($(this).children('li').size() > blocksPerRow)
($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
while ($(this).children('li').size() < blocksPerRow)
($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});
Je pense que cela devrait le faire. Ajoutez cela à $(window).resize() ainsi que l'événement document ready.
Si vous voulez atteindre cet objectif avec seulement CSS, le code serait comme si:
#div {
clear:both;
width:500px
}
.img {
display:block;
width:150px;
height: 50px;
float:left;
}
Pour autant que je me rappelle, c'est ça .. Bonne chance!
Je ne pense pas que ce soit possible en utilisant CSS seul. – casablanca
ok pas CSS seul alors comment – Moon
@casablanca vous pouvez purement faire cela avec CSS – kobe