Float erzeugt überlappende Divs

Ich habe zwei divs (eine innerhalb der anderen) und bin in ein kleines Problem, wenn ich den einen nach "links" schweben. Das Problem ist, dass das äußere div seine Höhe nicht erweitert, um dem Text innerhalb des inneren divs zu entsprechen. Da das wahrscheinlich ziemlich verwirrend ist, werde ich versuchen, es mit etwas Code zu erklären.Float erzeugt überlappende Divs

HTML:

<body> 
    <div id="div1"> 
     Inner Div: 
     <div id="div2">Testing long content.</div> 
    </div> 
</body>

CSS:

#div2 { 
    float: left; 
    width: 10px; 
}

ich eher hoffen, dass bei der Prüfung dies tatsächlich mein Problem zeigt, wie ich keine Chance zu testen, dies gehabt haben. Mein realer Code hat mehr Eigenschaften, die ich bei Bedarf darstellen werde.

Quelle

2009-06-21 PF1

Sie müssen den Clear-Fix verwenden. Fügen Sie Folgendes nach dem floated-div und innerhalb des containing div ein.

<div class="clear"></div>

und fügen Sie den folgenden Stil:

.clear { clear:both; }

Beispiel:

<div class="container"> 
    <div class="floatedDiv">Hello World</div> 
    <div class="clear"></div> 
</div>

Quelle

2009-06-21 03:49:03 Sampson

Danke Jonathan: Das hat super funktioniert! – PF1

Sie genial :) seine Arbeit –

Es ist keine Lösung. Es ist einfach klar. Du musst nur das Floating löschen :) –

(Das dritte Mal heute :-)) geben den äußeren div overflow: hidden;
und Breite.

Quelle

2009-06-21 03:49:55

Wirklich? Tut mir wirklich leid, wirklich. Ich denke, dass ich daran arbeiten muss, meine Suchanfragen zu ändern, um besser auszudrücken, was andere Leute das gleiche Problem nennen. – PF1

... oder auto –

Eine Breite zu einem Element hinzufügen, um sicherzustellen, dass es in der Höhe wächst macht CSS-Code schwer zu lesen, ich bezweifle, ob das eine sinnvolle Lösung ist. Die Zoom: 1 Lösung scheint mir besser zu sein, aber wahrscheinlich wird es nicht gültig sein w3c css. Der Überlauf: versteckt auch eine nette Lösung, aber macht Ihre CSS auch schwer zu lesen, weil es nicht über den Überlauf, Inhalt zu verbergen, sondern auch um das Element in der Größe wachsen lassen. – Michiel

Wenn Sie eine Breite zu Ihrem äußeren div keine zusätzlichen Markup, um Ihre HTML hinzufügen möchten oder hinzufügen, können Sie verwenden:

#div1 { 
    overflow:hidden; /* clears float for most browsers */ 
    zoom:1;   /* clears float for IE6   */ 
    }

Quelle

2009-06-21 11:45:12 Emily

Ich dachte Überlauf: versteckte auch in IE6 gearbeitet? – alex

Nein. Um Floats für IE6 zu löschen, müssen Sie hasLayout aufrufen. Dies geschieht, indem dem Element eine Position, Float, Anzeige, Breite, Höhe oder Zoom gegeben wird. Die Angabe von width oder height ist die gebräuchlichste Methode, um hasLayout aufzurufen, aber manchmal möchten Sie keine Dimension angeben, und Zoom ist am transparentesten. Weitere Informationen finden Sie unter hasLayout.net. – Emily

Ah - Ich füge display: block zu allem hinzu, was floated Elemente enthält. – alex

Vielleicht handlich zu beachten, dass es auch wissen clearfix Code der Brunnen ist von positioniseverything, das speziell für dieses Problem geschrieben ist und wahrscheinlich am robustesten und am einfachsten in jeder Situation anzuwenden ist. Die CSS sieht wie folgt aus:

<style> 
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
div.clearfix { display: inline-block; margin: 0 0 8px 0; } 
/* Hides from IE-mac \*/ 
* html div.clearfix { height: 1%; } 
div.clearfix { display: block; } 
/* End hide from IE-mac */ 
</style>

Um es in Ihrer Situation verwenden Sie das folgende tun würde:

<body> 
<div id="div1" class="clearfix" >Inner Div: 
<div id="div2">Testing long content.</div> 
</div> 
</body>

Quelle

2009-06-21 17:47:18 Michiel

die Höhe: 1% löste mein ganzes Problem. Nicht sicher warum. Können Sie erklären, was es im Zusammenhang mit einer Reihe von schwebenden Elementen mit 2 oder mehr nicht schwebenden Elementen an seinem Ende tut? – Emanegux

Während die oben genannten Lösungen funktionieren sollte, ich herausfinden, lohnt es sich zeigt, dass es eine ist Zaubertrick habe ich noch nicht gesehen (in diesem Thread).

Einfach float # div1 links. Wenn Sie das übergeordnete Element schweben lassen, wird automatisch das untergeordnete Element gelöscht - ziemlich nützlich, wirklich. Du könntest ein ganzes Layout aus schwebenden Stapeln bauen und dann am Ende ein letztes frei haben, und es wäre ziemlich zuverlässig.

Quelle

2009-06-22 08:26:18

Leider sind Schwimmer sehr süchtig machend. Am besten, sie sparsam zu benutzen und den einen oder anderen Überlauf zu besprengen: versteckt; – GlennG

Float erzeugt überlappende Divs

Antwort

Verwandte Themen