Warum kann das div nicht "schwimmen"?

Question

Ich bin sehr verwirrt über Float. .two sollte auf der rechten Seite von .one aber .two knapp unter .one

div { 
 
    width: 100px; 
 
    background: #FF9; 
 
} 
 
; 
 
.theone { 
 
    float: left; 
 
    font-size: 20px; 
 
}

<div class="theone">one</div> 
 
<div class="theright">two</div>

Answer 1

 .theright { 
    float: left; 
    font-size: 20px; 
} 

hinzufügen, dass in, wenn Sie 2 divs wollen einander neben sei es ist es am besten, wenn beide richtig schwimmen. zusätzlich können Sie ersetzen .theone mit .theone, .theright

Answer 2

in div css Anzeige hinzufügen: Inline-Block;

Answer 3

Standardmäßig haben divs den Anzeigewert auf "block" gesetzt, was bedeutet, dass sie "von der nächsten Zeile beginnen". Wenn Sie die Eigenschaft display: inline-block für alle divs hinzufügen, können Sie float: left für jedes div-Element hinzufügen, um es zuerst zu machen.

Answer 4

div { 
 
    width: 100px; 
 
    background: #FF9; 
 
display: inline-block; 
 
} 
 
; 
 
.theone { 
 
    float: left; 
 
    font-size: 20px; 
 
}

<div class="theone">one</div> 
 
<div class="theright">two</div>

Answer 5

A div Standard hat display: block durch.

Wahrscheinlich möchten Sie Ihren divs einen anderen Anzeigetyp zuweisen.

div {Breite: 100px; Hintergrund: # FF9; Anzeige: Inline; }

.theone {float: left; Schriftgröße: 20px; }

See jsFiddle

Answer 6

Ich werde Antwort eine detaillierte und erklärt versuchen und machen. Ein schwebendes Element schwebt aus seiner ursprünglichen Position in der Strömung. Grundsätzlich wirkt sich der Floating-Effekt nur auf Elemente aus, die in der HTML-Struktur nach deklariert sind.

In Ihrem Fall wird das Recht-Floating-Element nach dem Nicht-Floating-Element deklariert. So ist es normal theright erscheint unter theone und Sie sehen den schwebenden Effekt nicht.

Um ein Element auf der rechten Seite eines anderen zu floaten, müssen Sie es vor diesem anderen deklarieren. Wie folgt aus:

<div class="theright">two</div> 
<div class="theone">one</div> 
<style> 
    .theright { 
     float: right; 
    } 
</style> 

Beachten Sie, dass dies funktioniert, muss theright Element als theone größer. Andernfalls wird theone vollständig theright maskieren seinen Inhalt aus der Box schieben. Dies ist so, weil ein schwebendes Element aus dem Fluss herauskommt und über die anderen Elemente schwebt, wodurch die schwebenden Blöcke "vermieden" werden.

Es gibt viele andere Möglichkeiten, um das gleiche Ergebnis mit einer anderen Zielsetzung zu erhalten:

• theone Schwimmer auf der linken Seite, anstatt machen (Abfahrt theright als Grundblockelement)
• beide Elemente machen Inline-Blöcke und geben Sie entsprechende Breiten
• für nur zwei Elemente, es ist nicht notwendig, aber wenn Sie 3 oder mehr Elemente nebeneinander benötigen, können Sie sie alle auf der linken Seite schweben lassen (oder rechts in umgekehrter Reihenfolge deklarieren, abhängig von dem endgültigen Layout, das Sie wollen)
• usw.