Fondamentalement, je veux que les DIV intérieures en dehors de la DIV extérieure soient envelopper en fonction de la largeur de la DIV extérieure, qui augmente et se contracte en fonction de la largeur de la fenêtre du navigateur, comme:
.---------------------. | | <-- Browser Window | .-----------------. | | | ,-, ,-, ,-, | | | | |X| |X| |X| | | | | `-` `-` `-` | | | | | | | | ,-, ,-, ,-, | | | | |X| |X| |X| | | | | `-` `-` `-` | | | `-----------------` | | | `---------------------` .-------------------------------. | | <-- Browser Window enlarged | .---------------------------. | | | ,-, ,-, ,-, ,-, ,-, | | | | |X| |X| |X| |X| |X| <----- Inner divs wrap around accordingly, as if | | `-` `-` `-` `-` `-` | | they are text | | | | | | ,-, | | | | |X| | | | | `-` | | | `---------------------------` | | | `-------------------------------`
3 Réponses :
Vous pouvez simplement appliquer jsfiddle (live): http. : //jsfiddle.net/guh5z/ code source: float: laissé à chacun des divs internes. Consultez le jsfiddle suivant comme exemple (essayez de redimensionner le volet de résultats pour voir le comportement):
Fonctionne maintenant; Pas vraiment sûr de ce qui s'est passé là-bas. Ajouté le lien Jsfiddle.
Veuillez inclure le code dans votre réponse, car Jsfiddle peut être en panne un jour :)
défini pour ces blocs - Affichage: Inline-Block et pour le conteneur principal de la largeur ...
C'est mieux que la solution à gauche du flotteur. Étant donné que les éléments flottants apparaîtront à l'extérieur, sauf si vous spécifiez le débordement: caché sur la DIV extérieure
Bonne prise, @wouterh! inline-block devrait élargir l'élément contenant. Je pense que le jsfiddle Jsfiddle.net/guh5z/2 mieux décrit la différence, car la hauteur n'est pas fixé.
Je suis une chose plus «future» solution, bien sûr, vous aurez des problèmes avec une implémentation inférieure à savoir, mais il s'agit d'une sorte de compromis;)
Excellent! Merci! Y a-t-il un moyen de justifier également toutes les divs? Pas nécessaire, mais serait bien si possible.
@WRONGUSERNAME Voir le CSS3 Texte-Justify Propriété .
Cela n'a pas fonctionné pour moi. Il vient de faire développer les divs intérieurs.
Vous pouvez utiliser CSS: html: J'espère que cela aide < / p> plutôt que si vous mettez du texte à la place. Quelque chose comme ceci:
C'est le même tour que proposé dans la réponse de Jonathan Newmuis.
Oh, je n'ai pas vu la réponse de Jonathan jusqu'à présent :)
Malheureusement, ce n'est pas un texte, mais une combinaison de texte et d'informations contenues dans un div :( Merci pour la suggestion!
Vous n'avez pas nécessairement besoin d'insérer du texte uniquement. Vous pouvez également mettre des divs imbriqués là aussi.