Warum zwei Float Divs untereinander stehen?

Question

Warum geht das zweite Div unter das erste? Beide sind "float" -Elemente. Wenn ich eine Breite für das zweite Div setze, funktioniert alles gut. Aber ich erwarte, dass diese zwei divs in einer Zeile liegen.

.one { 
 
    background-color: green; 
 
    float: left; 
 
    border: 1px solid green; 
 
} 
 
.two { 
 
    float: left; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 1

Dies ist, weil Sie nicht die Breite der der Schwimmelemente definiert haben. Wenn Sie eine max-width, z. B. 50%, definieren, befinden sie sich nicht mehr in derselben Zeile. Ich empfehle max-width im Gegensatz zu width weil ich glaube, dass Sie nicht die Elemente, eine statische width geben wollen. Außerdem sollten sie flexibel genug sein, um so viel Platz wie möglich zu nehmen, es sei denn, sie sollten sich nicht gegenseitig stören, was nach 50% geschieht.

.one { 
 
    background-color: green; 
 
    float: left; 
 
    border: 1px solid green; 
 
    max-width: 50%; 
 
} 
 
.two { 
 
    float: left; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
    max-width: 50%; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 2

können Sie flex verwenden stattdessen schwimmen. Fügen Sie display: flex; für einen Container hinzu. Und flex: 0 0 auto; für das erste div und flex: 1 1 auto; für das zweite. flex: 0 0 auto; bedeutet, dass das Element so viel Platz benötigt wie nötig. flex: 1 1 auto; bedeutet, dass das Element den gesamten verfügbaren Speicherplatz einnimmt.

.container { 
 
    display: flex; 
 
} 
 

 
.one { 
 
    flex: 0 0 auto; 
 
    background: red; 
 
} 
 

 
.two { 
 
    flex: 1 1 auto; 
 
}

<div class="container"> 
 
    <div class="one">Menu</div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div> 
 
</div>

Answer 3

Sie können sie nur einige Breite Optionen in% geben oder Pixel berechnet CSS-Funktionen verwenden, so etwas wie dieses ...

.one { 
 
    background-color: green; 
 
    float: left; 
 
    border: 1px solid green; 
 
    display: block; 
 
    width: 10%; 
 
} 
 
.two { 
 
    width: 70%; 
 
    float: left; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
    display: block; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>

Answer 4

Flexbox ist, was du wirklich willst, denke ich, Float ist großartig, aber immer wie ein Hack als Gegner zu einer echten Lösung.

Sie können flexbox über alle Browser verwenden, IE8 kann nicht damit umgehen, aber das ist kein unterstützter Browser mehr. Ich schlage vor, Sie lesen es auf w3schools Sie haben in der Regel ganz nette Tutorials.

.flex-container { 
 
    display: flex; 
 
} 
 
.one, 
 
.two { 
 
    padding: 5px; 
 
} 
 
.one { 
 
    background-color: green; 
 
    border: 1px solid green; 
 
} 
 
.two { 
 
    background-color: red; 
 
    border: 1px solid red; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
}

<div class="flex-container"> 
 
    <div class="one">Menu</div> 
 
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div> 
 
</div>

Was, warum es wurde mit Schwimmer passiert, wenn Sie sonst nichts Anzeigeblock sagen wird den gesamten Raum zugeteilt nehmen, die zu 100%, mit einem des divs 100 Aufnahme % gibt es keinen Platz für den anderen auf der gleichen Linie.

Sie hätten ihm eine bestimmte Breite geben oder die Anzeige auf Inline umstellen und den Float links von .two entfernen können (obwohl das ein bisschen komisch aussehen würde).

.one { 
 
    float: left; 
 
    background-color: green; 
 
    border: 1px solid green; 
 
} 
 
.two { 
 
    display: inline; 
 
    background-color: red; 
 
    border: 1px solid red; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one">Menu</div> 
 
<div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto beatae delectus eveniet impedit, labore minima nihil nostrum sint voluptates. Animi illum minima officia placeat quo rem repellendus reprehenderit vel.</div>