J'essaie de créer un conteneur div avec une largeur uniquement de la taille du contenu. J'ai cette partie qui fonctionne correctement en utilisant html css Le problème que j'ai lorsque le Floater DIVS est enveloppé dans le conteneur. Je veux qu'ils enveloppent, mais je veux aussi que la largeur du conteneur div puisse redimensionner en conséquence. Par exemple, si votre navigateur est de 1000px large, tout fonctionne bien et que le conteneur est de 900px. Toutefois, si vous réprimez le navigateur à quelque chose comme 750px de large, la 3ème plongée enveloppe à la ligne suivante, mais le conteneur est de 750px de large; Pas le 600px que je veux. est le comportement que je veux possible? Si oui, comment? J'ai fait un violon pour que tout le monde puisse voir ce que je parle de Cliquez ici float: gauche sur le conteneur. Voici ce que j'ai jusqu'à présent.
4 Réponses :
c'est-à-dire que la largeur de l'élément .Container est déterminée par la largeur de la page ou de l'élément contenant. L'élément contenant peut être l'élément HTML en fonction du navigateur. Fondamentalement, vous avez les éléments .floater ayant une largeur fixe de 300PX x 100px (définir l'explicitement) et la largeur de l'élément .Container l'élément et la hauteur sont définies implicity. Essayez quelque chose comme ça. Cela provoquera toujours la largeur de l'élément .Container d'être toujours inférieure à celle de l'élément contenant. Donc, si, par exemple, l'élément contenant est HTML qui a une largeur de 1000px, la largeur de l'élément .Contenante sera de 90% de 1000px qui sera de 900px. Si l'élément HTML est 750px, l'élément .Container sera de 90% de 750px, ce qui est 675px. Vous pouvez également avoir des problèmes avec votre code en fonction de ce que vous avez ci-dessus, ci-dessous et à l'intérieur de la. Élément de conteneur, puisque vous ne vous avez pas effacé des flotteurs. Essayez une chose comme celle-ci
Eh bien, nous avons eu le même problème. Nous utilisions le plug-in jquery maçonnerie spécifiquement pour nos éléments flottés.
Ce http://masonry.desandro.com/demos/centered.html résoudrait votre problème!
La seule chose est que vous devez utiliser ce plugin. Ensuite, si vous essayez de flotter des éléments dans un conteneur qui n'a pas de largeur fixe, nous devinons que votre mise en page profiterait grandement à ce plugin.
Vous devrez effacer les flotteurs pour que le conteneur enveloppe. Soit ...
http://nicolasgallagher.com/micro-clearfix-hack/
et en utilisant le ClearFix du site ci-dessus modifier la classe sur conteneur pour être après la dernière flottante ou ajoutez un ClearFix à vous CSS comme ...
class = "conteneur cf"
0 commentaires
J'ai fait quelque chose de similaire pour une galerie d'images de vignettes Instagram, où l'image peut être inférieure à la taille de la vignette mais pas supérieure à celle et les vignettes prennent 100% de la largeur du conteneur collectivement. C'est ainsi que les images prennent toute la largeur tout en ne les étihant pas.
Vous pouvez obtenir cet effet assez sans effort si vous utilisez un préprocesseur CSS. Si vous n'utilisez pas de préprocesseur CSS, il y aurait plus d'effort impliqué. P>
Voici un exemple de Codepen , qui contient un lien vers une autre démo. p>
essentiellement, la partie magique est ce stylet CSS: P>
@media screen and (min-width: 300px) {
.floater {
width: 50%;
}
}
@media screen and (min-width: 600px) {
.floater {
width: 33.333333333333336%;
}
}
@media screen and (min-width: 900px) {
.floater {
width: 25%;
}
}
@media screen and (min-width: 1200px) {
.floater {
width: 20%;
}
}
@media screen and (min-width: 1500px) {
.floater {
width: 16.666666666666668%;
}
}
@media screen and (min-width: 1800px) {
.floater {
width: 14.285714285714286%;
}
}
@media screen and (min-width: 2100px) {
.floater {
width: 12.5%;
}
}
@media screen and (min-width: 2400px) {
.floater {
width: 11.11111111111111%;
}
}
@media screen and (min-width: 2700px) {
.floater {
width: 10%;
}
}
@media screen and (min-width: 3000px) {
.floater {
width: 9.090909090909092%;
}
}
Supprimer le flotteur: à gauche; de la classe de conteneurs