La deuxième div flottante en chrome disparaît avant la première div

StackOverflow https://stackoverflow.com/questions/1013027

Question

Deux div sont côte à côte, les deux flottant à gauche dans un wrapper. Dans IE et Firefox, ils apparaissent correctement, mais dans Chrome, le deuxième div flottant disparaît au-dessous de Div A. Lorsque je supprime & "Float: left &"; dans le css, il se positionne correctement dans Chrome, mais s'efface dans IE et Firefox (comme il se doit). Je ne sais pas pourquoi il apparaît de cette façon dans Chrome. Des idées?

Était-ce utile?

La solution

  1. Les codes HTML et CSS seraient utiles pour répondre à cette question.

  2. Si vous n'avez que deux divs et que vous voulez qu'ils flottent les uns à côté des autres, définissez une largeur sur chacun d'eux et faites-en flotter une à gauche et flotter à droite. N'oubliez pas de laisser de l'espace entre les deux.

Autres conseils

dans mon cas, j'utilise display:inline-table pour l'élément parent des éléments flottants .. Même si ce n'est pas une table.

J'ai utilisé le <=> afin de corriger le bug rencontré par Google Chrome ..

J'ai le même problème dans Chrome et je le résous en donnant display:inline-table au parent div

La solution est simple: il suffit d'ajouter à la div qui contient tous ces attributs un attribut: display: table; - cela devrait résoudre le problème.

J'avais plusieurs divs flottants css avec des liens de texte à l'intérieur et le conteneur tournait à droite de chacun. Le correctif consistait à supprimer de l'espace dans le texte d'affichage du lien. par exemple. ...> TEXT </a> à ...>TEXT</a>

Vous devez donner 1 div la hauteur

Par exemple

Div 1 

.oneColFixCtrHdr #mainContent {
    background: #FFFFFF;
    width: 375px;
    height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-bottom: 20px;
    padding-bottom: 0px;
    padding-top: 20px;
}

Div 2 

.oneColFixCtrHdr #maincontent2 {
    background: #FFFFFF;
    width: 390px;
    height: auto;
    position: relative;
    display: inline-block;
    float: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    padding-bottom: 0px;
    padding-top: 20px;
    padding-left: 20px;
    border-left-style: groove;

Dans Chrome - Ce problème semble lié à l'attribut display de l'élément parent. J'ai eu le même problème et j'ai fait beaucoup de recherches. Enfin, je l’ai corrigé en supprimant l’attribut CSS display de la balise TD parent. J'ai aussi obsorved une chose wiered. Quand j'avais display: block; pour parent un élément de table TD, dans Chrome, colspan ne fonctionnait pas (dans IE, il fonctionnait bien). J'ai gratté beaucoup de cheveux à la recherche de ce problème.

Je rencontrais le même problème avec Div et sa Children Span avait un flottement correct. Pour résoudre ce problème, j’ai simplement ajouté l’affichage en ligne au parent Div et cela fonctionne désormais aussi bien dans Chrome que dans Safari.

J'ai tout intégré dans <div style="display:inline;"> ... code .. </div> et résolu le problème.

  1. Sans exemple de code, il s'agit simplement de deviner

  2. Je ne suis pas sûr du fonctionnement de Chrome, mais je connais IE dans ses propres styles. Avez-vous utilisé une réinitialisation css? La plupart des problèmes de navigation peuvent être résolus de cette manière.

  3. On dirait que la largeur combinée des 2 div flottantes dépasse la largeur du wrapper. Essayez de régler la largeur du wrapper sur 100% ou pas de largeur ... ou de réduire la largeur des deux div flottantes.

  4. avez-vous des affichages: en ligne, propriétés de style de bloc, etc. définies sur l'un de ces div?

Qu'en est-il des paramètres d'affichage: inline-block et la largeur des deux divs?

EDIT: définir une largeur maximale de 50% pour chacun s’appliquerait à tous les navigateurs sauf IE6, en supposant qu’il n’y ait pas de marge de remplissage / marge définie.

J'ai rencontré le même problème. Chrome n'affiche pas correctement les div avec float. Le bloc est affiché sous le premier. Pas de côté comment je m'attendais. La solition est simple! Entourez les deux blocs avec div qui ne contient aucun autre bloc frère à l'intérieur .

J'ai eu un problème lorsque j'ai eu un div de conteneur avec un groupe de divs internes avec le jeu de propriétés float: left. Ma dernière division intérieure (la plus à droite) a également été bouclée. J'ai résolu mon problème en veillant à ce que les divs internes combinés avec des marges ne dépassent pas la largeur du div de conteneur.

L’outil de développement de Google Chrome, similaire à Firebug, m’a aidé à résoudre le problème. Pour mon conteneur div, je n'ai pas explicitement défini de largeur, mais l'outil de développement de chrome pouvait me montrer la largeur héritée. J'ai ensuite examiné toutes les largeurs des divisions internes combinées, puis ajusté une partie de la largeur de la division interne.

Problème similaire avec les divs enfants flottantes. Dans mon cas, je flottais un div entourant à droite, qui contenait un élément h3 (avec la propriété text-align) - suivi de 2 éléments de bloc enfant.

Intention texte du centre h3, par rapport aux éléments de bloc enfant situés en dessous.

-

Problème? je n'avais pas défini de largeur pour les éléments enfants de bloc. Pourquoi? Je voulais que la largeur contienne un rembourrage distinct à gauche / à droite par rapport à la quantité de texte dans ce conteneur. par exemple. remplissage: 10px 30px;

Solution J'ai opté pour une largeur des divs environnantes et enfants, ainsi que pour centrer le texte sur les divs enfants afin d'obtenir des résultats similaires lors de la première tentative.

J'ai rencontré le même problème. J'avais deux divs avec float: gauche dans une table td - Je devais définir le style de la table td pour inclure style = & "Text-align: left; &"; pour qu'ils s'alignent correctement.

Je ne suis pas un héros HTML, donc dans mon cas, le problème était vraiment idiot.

  

C’était simplement une erreur de syntaxe , assurez-vous donc de vérifier votre syntaxe avant de commencer à tirer les cheveux comme je le faisais.

     

Et SAFARI l’ignorait complètement et affichait correctement les divs, ce qui me laissait vraiment perplexe.

À la base, c’était une balise div non fermée qui créait le problème: 

<div class="seperator" </div>    instead of    <div class="seperator"> </div>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top