Float Erstellt überlappende Divs

8

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

HTML:

%Vor%

CSS:

%Vor%

Ich hoffe eher, dass das, wenn es getestet wird, mein Problem zeigt, da ich keine Gelegenheit hatte, das zu testen. Mein realer Code hat mehr Eigenschaften, die ich bei Bedarf darstellen werde.

    
PF1 21.06.2009, 03:47
quelle

5 Antworten

22
___ antwort1023160 ___

Sie müssen den Clear-Fix verwenden. Fügen Sie Folgendes nach dem Floating-Div und innerhalb des Containers ein.

%Vor%

Fügen Sie den folgenden Stil hinzu:

%Vor%

Beispiel:

%Vor%     
___ answer1024399 ___

Vielleicht ist es praktisch, dass es auch den bekannten Clearfix-Code von positioniseverything gibt, der speziell für dieses Problem geschrieben wurde ist wahrscheinlich am robustesten und am einfachsten in jeder Situation anzuwenden. Das CSS sieht folgendermaßen aus:

%Vor%

Um es in Ihrer Situation zu verwenden, würden Sie Folgendes tun:

%Vor%     
___ answer1023733 ___

Wenn Sie Ihrem HTML-Code kein zusätzliches Markup hinzufügen oder dem äußeren Div eine Breite hinzufügen möchten, können Sie Folgendes verwenden:

%Vor%     
___ tag123html ___ HTML (Hyper Text Markup Language) ist die Standard-Auszeichnungssprache, die zum Strukturieren von Webseiten und zum Formatieren von Inhalt verwendet wird. HTML beschreibt die Struktur einer Website semantisch zusammen mit Hinweisen für die Präsentation, wodurch sie eine Markup-Sprache statt einer Programmiersprache wird. Die neueste Revision der HTML-Spezifikation ist HTML5.2. ___ answer1023162 ___

(Das dritte Mal heute :-)) gib den äußeren div Überlauf: versteckt;
und Breite.

    
___ answer1026072 ___

Während die obigen Lösungen funktionieren sollten, ist es wichtig, darauf hinzuweisen, dass es einen magischen Trick gibt, den ich bisher noch nicht gesehen habe (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. Sie könnten ein ganzes Layout aus schwebenden Stapeln erstellen und dann am Ende ein letztes frei haben, und es wäre ziemlich zuverlässig.

    
___ tag123css ___ CSS (Cascading Style Sheets) ist eine Darstellungsstilsprache, die das Aussehen und die Formatierung von HTML (Hyper Text Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen einschließlich (aber nicht beschränkt auf) Farben beschreibt. Layout, Schriftarten und Animationen. ___ qstnhdr ___ Float Erstellt überlappende Divs ___ qstntxt ___

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

HTML:

%Vor%

CSS:

%Vor%

Ich hoffe eher, dass das, wenn es getestet wird, mein Problem zeigt, da ich keine Gelegenheit hatte, das zu testen. Mein realer Code hat mehr Eigenschaften, die ich bei Bedarf darstellen werde.

    
___
Sampson 21.06.2009, 03:49
quelle
5

Wenn Sie Ihrem HTML-Code kein zusätzliches Markup hinzufügen oder dem äußeren Div eine Breite hinzufügen möchten, können Sie Folgendes verwenden:

%Vor%     
Emily 21.06.2009 11:45
quelle
5

Vielleicht ist es praktisch, dass es auch den bekannten Clearfix-Code von positioniseverything gibt, der speziell für dieses Problem geschrieben wurde ist wahrscheinlich am robustesten und am einfachsten in jeder Situation anzuwenden. Das CSS sieht folgendermaßen aus:

%Vor%

Um es in Ihrer Situation zu verwenden, würden Sie Folgendes tun:

%Vor%     
Michiel 21.06.2009 17:47
quelle
2

(Das dritte Mal heute :-)) gib den äußeren div Überlauf: versteckt;
und Breite.

    
Itay Moav -Malimovka 21.06.2009 03:49
quelle
1

Während die obigen Lösungen funktionieren sollten, ist es wichtig, darauf hinzuweisen, dass es einen magischen Trick gibt, den ich bisher noch nicht gesehen habe (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. Sie könnten ein ganzes Layout aus schwebenden Stapeln erstellen und dann am Ende ein letztes frei haben, und es wäre ziemlich zuverlässig.

    
Ryan McGrath 22.06.2009 08:26
quelle

Tags und Links