échelle contenu flotté pour remplir le conteneur

J'ai un div HTML avec largeur fixe et hauteur, contenant des divs imbriqués arrangés avec 'float: left'. Je voudrais redimensionner les divs imbriqués afin qu'ils remplissent le conteneur (avec de l'espace restant après l'élément imbriqué final comme d'habitude.) En d'autres termes, je voudrais que les éléments imbriqués soient aussi grands que possible sans déborder le conteneuréchelle contenu flotté pour remplir le conteneur

Sample point de départ:

<div style="position: relative; background-color: blue; border: 1px solid yellow; width: 650px; height: 500px; margin: auto;"> 
    <div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"></div> 
    <div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"></div> 
    ... 
</div>

(styles inline par souci de concision)

le contenu divs doit être redimensionnée avec leur aspect rapport intact, ni le nombre de divs, ni la taille du conteneur sont connus dans avance

Étant donné que CSS ne fournit pas un moyen de dimensionner automatiquement le contenu flottant de cette manière, je le fais en JavaScript, mais je ne trouve pas d'algorithme approprié pour calculer la taille cible des divs de contenu; Je suppose que je dois faire quelque chose d'intelligent avec les ratios d'aspect relatifs du conteneur et des éléments de contenu, mais je ne peux penser à rien qui fonctionnerait ...

Source

2011-01-12 Laurie

Pouvez-vous fournir des exemples plus détaillés? Je pense que la façon la plus simple de faire cela serait de dessiner quelques images montrant avant et après pour différents nombres d'éléments. – thirtydot

est jQuery acceptable? ou vous avez besoin de JavaScript pur? – Dan

J'utilise déjà jQuery, donc une solution utilisant ça est bien :) Je vais essayer de créer des exemples d'images si cela peut aider à expliquer le problème. – Laurie

Vous pouvez le faire en utilisant seulement CSS, mais seulement dans les normes Navigateurs compatibles (donc, IE7 ou moins).

Définir votre contenant div display: table-row;

Set chacun de vos divs imbriqués pour display: table-cell;

espoir qui aide un peu :)

Source

2011-01-12 09:35:56 Kalessin

Hmm, bel effet, mais il semble que le contenu soit rétréci au contenu, pas au contenu (ce qui est logique, car c'est ce que vous voulez dans une table ...) Un peu de la moitié résout le problème inverse; - Je veux que la taille du conteneur reste fixe, et que le contenu divs soit développé pour le remplir. – Laurie

@Laurie: Cela ne devrait pas arriver, sauf si vous spécifiez la largeur des divs imbriquées. Si vous spécifiez la largeur div contenant et laissez les divs imbriqués se trier, ça devrait aller. – Kalessin

Hmm, j'ai peut-être eu quelques règles CSS supplémentaires dans mon test initial, mais avec une ardoise propre, je reçois toujours les divs imbriqués dans une seule ligne, étiré verticalement pour remplir. Et si je ne spécifie pas la largeur/hauteur des divs de contenu, comment leur ration d'aspect va-t-elle être limitée? C'est une contrainte clé du problème. – Laurie

Vous pourriez compter le nombre de divs flottant, diviser la largeur du conteneur par eux, puis calculer un pourcentage pour la largeur.

Source

2011-01-13 09:59:39 Elq

Un pourcentage de quoi? – Laurie

pourcentage de la largeur du conteneur.Si votre javascript compte 4 objets flottants, alors 100 (largeur du conteneur%)/4 (# flottants) = 25% de la largeur totale disponible pour eux. – Elq

seulement si je les veux sur une seule ligne ... – Laurie

échelle contenu flotté pour remplir le conteneur

Répondre

Questions connexes