J'ai deux divs sur une page Web et j'aimerais que les deux d'avoir une largeur fixe et que je voudrais que le premier div ait flotté à gauche de la deuxième div.
Cela sonne si simple que je ce que Après le balisage et le CSS me donneraient le résultat souhaité: ceci ne fonctionne pas comme prévu, la droite div apparaît à la ligne suivante comme s'il n'était pas flotté . Ceci est mieux expliqué dans cet exemple de page Web: Ma question est la raison pour laquelle cela ne fonctionne pas comme prévu? pas comment le réparer. Notes:
7 Réponses :
div.left {
float: left;
width: 200px;
height:200px;
background:red;
}
div.right {
float:right;
width: 200px;
height:200px;
background:blue;
}
see http://jsfiddle.net/3kUpF/Alternatively, if you want them side by side then you can float:left on both
see http://jsfiddle.net/3kUpF/1/
Mais pourquoi? Cela ne semble pas être le comportement correct ... et cette réponse ne donne pas le résultat souhaité.
Vous avez affaire à 2 divs différents avec une classe différente. Si c'était un LI à l'intérieur ul, alors nous pouvons faire flotter: à gauche une fois, et cela s'appliquera à tous les Li's
Parce que lorsque nous référons LI, nous faisons UL.LI, alors tous les LI's à l'intérieur de l'UL recevront les mêmes propriétés de coiffage. Cela fonctionnera pour ce cas si les deux divs ont le même nom de classe. Mais dans votre CSS, vous avez 2 noms de classe et des propriétés différentes pour chaque
Voir ce jsfiddle.net/3kupf/8 , si les deux ont le même nom de classe, nous n'avons besoin que de Définir le flotteur: à gauche une fois
Bien sûr, je comprends totalement cela comme expliqué dans l'exemple HTML que j'ai lié à. Mais si j'ajoute un paragraphe jsfiddle.net/u2jmz , alors je devrais ajouter un balisage supplémentaire pour effacer le flotteur . Une mauvaise pratique imo.
Bien sûr, cela est attendu. Tout ce que vous avez à faire est de P {Effacer: GAUCHE} et cela s'appliquera à tous les P. JSFIDDLE.net/U2JMZ/3 . Rien ne se passe par magie, c'est une procédure normale. Vous devez coder le comportement que vous voulez.
@Alex: Pouvez-vous sauvegarder votre affirmation selon laquelle c'est "normal"? Je crois que ce comportement est incorrect, mais si vous avez une documentation qui prouve le contraire, je serais très reconnaissant. Comme je l'explique auparavant, la clartée: le réglage de gauche fonctionnera mais ne devrait pas être nécessaire.
C'est la procédure correcte de sa forme la plus simple. Nous n'utilisons aucun piratage ou faire quelque chose de spécial. Il ne peut être plus simple que cela. Votre stressant trop sur elle. Très basique, pas de documentation.
@ALEX: Pouvez-vous expliquer pourquoi l'opéra produit le balisage d'origine dans la question de savoir comment je m'attends à ce que ce soit ainsi que d'autres navigateurs ne le font pas. Je ne trouve aucune documentation pour expliquer pourquoi une largeur d'un élément de bloc pourrait ne pas être flottée.
Différents navigateurs se comportent différemment. Vous devez créer un balisage qui fonctionne sur tous les navigateurs. Vous ne pouvez pas supposer que votre code est correct car un navigateur l'a affiché correctement, puis vous essayez de trouver une solution pour tous les autres navigateurs. Vous devez regarder tous les navigateurs en général. Je vous ai plus fourni un exemple pour vous montrer différentes manières. Tous sont compatibles avec le navigateur croisé sous la forme la plus simple.
Bien sûr, mais ma question n'était pas de savoir comment puis-je résoudre ce problème, ma question était pourquoi, pourquoi un élément de bloc avec une largeur n'est pas flotté quand un sans faire?
C'est une mauvaise pratique de ne pas spécifier la propriété de largeur. Vous risquez d'obtenir la DIV pour afficher différemment dans différents navigateurs. Lorsque vous spécifiez une largeur, vous devez utiliser les propriétés CSS que je vous ai montrées.
Le deuxième élément doit être élément inline . Si vous ne voulez pas faire de second élément en ligne, le flottez aussi à gauche. Mais votre conteneur s'effondrera. Vous pouvez le réparer en utilisant voir exemple Effacer :
Je ne veux pas que les éléments soient en ligne.
En ligne est vraiment utilisé pour Li's. Cela ne fonctionne pas bien dans ce cas. jsfiddle.net/3kupf/2
Mais pourquoi ça ne marche pas? Je crois que ça devrait. Avoir le bon élément comme inline est inutile si je veux définir une hauteur ou ajouter du rembourrage supérieur et inférieur.
2Gatekiller: Parce que les flotteurs ont été conçus pour fonctionner avec des éléments en ligne. Pensez à l'image dans le texte.
@gor: Pouvez-vous sauvegarder cette réclamation avec une documentation?
@gor: Votre réponse mise à jour est une solution, mais au détriment du balisage supplémentaire et du CSS.
ici est un bon article. essayer de trouver une citation appropriée
@Gor: Cet article explique certainement beaucoup de floats mais ne touche pas ce problème.
Il me semble que c'est la règle simple qui bloque, sauf flottante, commencez toujours une nouvelle ligne. w3.org/tr/css2/visuren.html#block-formatting < / a> section 9.4.1
@Elroy Flynn merci beaucoup :) Cela a du sens maintenant même si ce n'est pas ce que je m'attendais. Si vous soumettez ce commentaire comme une réponse, je vais le marquer comme correct.
@ Elroy-Flynn S'il vous plaît ajouter votre commentaire comme une réponse afin que je puisse vous donner une certaine réputation :)
@gor, pas besoin de cet extra br là-bas. Vous pouvez simplement définir #Container sur Overflow: auto; .
flotter les deux divs restants.
Appliquez une marge de largeur gauche positive (Div.right), dans votre cas 200px.
Appliquez une marge de largeur gauche négative de largeur (div.left) + largeur (Div.Right), dans votre cas, 200px + 200px = 400px.
Cela semble être un piratage plutôt qu'une solution. Si j'ajoute un élément P après la droite DIV, l'élément P sera déplacé sur la même ligne que les deux éléments div. Cela nécessiterait une solution de float claire qui n'est pas une bonne solution non plus.
Je pense que je pourrais peut-être mal comprendre votre question. De quel divisez-vous le plus éloigné gauche, le premier ou le second? "La seconde div à gauche de la première" rend le lien de son, vous voulez que le .right soit à gauche.
Vous pouvez ajouter tags. Cela résoudrait le problème. Sans casser le reste de la page (exemple). clair: les deux; votre
Encore une fois, cela semble être un correctif / hack plutôt qu'une solution appropriée ou une explication de la raison pour laquelle cela ne fonctionne pas comme prévu.
Je pense que dans ce cas, vos attentes sont une plus grande partie du problème, alors comment cette balise fonctionne. Si l'ajout d'une règle dans un fichier CSS rendrait la balise se comporter comme vous l'attendez de résoudre mes problèmes, je serais très heureux :)
Je conviendrais que mes attentes pourraient être le problème. Cependant, pourquoi l'opéra met-elle en œuvre cela comme je veux et non d'autres navigateurs? Qui a raison? Qui a tort? et pourquoi?
@gatekiller Tous les navigateurs affichent des éléments légèrement différents. Même les navigateurs qui utilisent le même moteur (Chrome & Safari utilisent les deux webkit) ne sont pas exactement les mêmes sur chaque page. Malheureusement, il n'y a pas de vrai droit ou mal dans l'entreprise HTML.
Si vous voulez que les deux conteneurs flottent à côté de l'autre, vous pouvez plutôt utiliser une portée au lieu d'une div. Cela pourrait apporter le problème à une fin.
Une étendue est un élément intégré et ce problème tourne autour des éléments de blocage.
Dans ce cas, vous pouvez ajouter une DIV autour des effondres comme suit pour pouvoir plonger la fonctionnalité d'un div:
Cela ressemble à beaucoup de balises inutiles. Quoi qu'il en soit, il y a maintenant une réponse sur la raison pour laquelle cela se produit.
Il me semble que c'est la règle simple qui bloque, à moins que de flotter, commencez toujours une nouvelle ligne. w3.org/tr/csss2/visuren.html#block-formatting section 9.4.1 -
Merci beaucoup pour cette réponse. Je suppose que l'ajout d'une largeur à un élément de bloc lui apporte dans son propre contexte et donc sur une nouvelle ligne.
+1 pour la liaison à la documentation expliquant ce qui se passe ici. De plus, pour résoudre votre problème initial @gatekiller, vous devez définir le second div sur Affichage: Inline-Block . De cette façon, votre contenu est toujours organisé sémantiquement et vous n'avez pas besoin d'ajouter de marquage hacky à votre HTML (comme un refuge Div ou d'emballage dans Span Éléments comme d'autres suggérées) ou à votre CSS ( Comme forçant tous les éléments p à effacer: les deux . C'est le meilleur des deux mondes avec le marquillage le plus simple possible: JSFIDDLE.net/MLMS13/MMUPY
@Gatekiller Si P est après gauche DIV, cela ne fonctionnera pas comme vous le souhaitez jsfiddle.net/mmupy/2. seul moyen de le faire est d'effacer p. et flotter les deux divs laissés. Sauf si c'est ce que vous recherchez.
@ALEX, si vous ne voulez pas que rien soit à la droite du #Left Div, pourquoi voudriez-vous le flotter en premier lieu? ... Ou peut-être que je ne comprends pas?
Si vous modifiez l'exemple @gatekiller s SO gauche-bêta est float: droite au lieu de float: gauche , il montrera le côté des deux éléments à côté (avec un effet de flotteur droit évidemment). Pourquoi la règle que vous avez citée n'est-elle pas appliquée dans ce cas?
Alors, pourquoi si vous avez expliqué que la largeur ne fonctionne pas flotte et si vous ne mettez pas la largeur, cela fonctionne?
Les éléments flottants peuvent débrancher des éléments de blocs "en", occupant la même ligne, mais poussant le contenu (pas l'élément lui-même) sur. Dans ce cas, la gauche est "à l'intérieur" à droite, mais il ne reste plus d'espace pour le texte à droite, donc ça passe en dessous. Pour voir ce que je veux dire, essayez de définir la largeur de droite à 300PX au lieu de 200px - vous devriez voir la frontière bleue "autour" à gauche, avec le texte qui coule autour de lui. Pour "résoudre" cela, je suggérerais de donner un flottant de gauche ou un affichage de bloc-en ligne.
Avez-vous essayé d'échanger l'ordre de vos divs? Aussi je suis un peu confus au fur et à mesure que vous voulez que votre deuxième div pour flotter à gauche de votre premier div, vous flottez ensuite: laissé votre premier div. Si vous le faites comme vous l'avez décrit, cela devrait fonctionner. L'alternative serait de les faire flotter: laissé
Cela fonctionnerait si j'ai échangé l'ordre des DIV et flottait le premier à droite, mais ce n'est pas la sémantiquement correct parce que je veux que la gauche divise soit d'abord dans le contenu et la DIV droit de seconde.
Vous devez aussi être confus. Float GAUCHE signifie: "flotter tout ce qui est à côté de la droite de moi" ou "flotte-moi à gauche de tout ce qui est ensuite". Vous ne mettriez pas flottant: laissé sur la droite div parce que cela flotterait la droite à gauche de tout ce qui est ensuite indiqué dans l'exemple WebPage.