爲什麼兩個浮動div都站在另一個之下？

Question

爲什麼第二個div會在第一個下面？他們都是「浮動」元素。當我設置第二個div的寬度時，所有效果都很好。但我預計這兩個div位於一排。

.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

這是因爲你沒有定義浮動元素的寬度的。如果您定義max-width，比如說50%，它們將不再位於同一行上。我建議給max-width而不是width，因爲我相信你不想給這個元素一個靜態的width。此外，他們應該靈活地採取儘可能多的空間，除非他們不應該混淆彼此，這發生在50%之後。

.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

可以使用彈性，而不是浮動。 爲容器添加display: flex;。第一格爲flex: 0 0 auto;，第二格爲flex: 1 1 auto;。 flex: 0 0 auto;表示元素將根據需要佔用盡可能多的空間。 flex: 1 1 auto;表示該元素將佔用所有可用空間。

.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

能不能給他們一些％寬度的選擇，或利用像素計算CSS功能，這樣的事情...

.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是你真正想要的東西，我認爲，浮動很棒，但總是覺得自己像一個反對的黑客編輯成真正的解決方案。

您可以在所有瀏覽器中使用flexbox，IE8無法處理它，但那不再支持瀏覽器。我建議你在w3schools上閱讀它們，它們通常有相當不錯的教程。

.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>

至於爲什麼它與浮動發生的事情，除非你說，否則任何顯示塊會佔用分配的整個空間，這是100％，與申報單的一個佔用100 ％在同一行上沒有空間供另一個人使用。

你可以給它一個設定的寬度，或者將顯示內容改爲內聯，並從.two中刪除左邊的浮動（儘管這看起來有點奇怪）。

.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>