為什么兩個浮點div彼此並排站立？

Question

為什么第二個div低於第一個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

您可以使用flex而不是float。 添加display: flex; 一個容器。 和flex: 0 0 auto; 對於第一個div和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

您可以使用calc 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是您真正想要的，float很棒，但始終感覺像是hack，而不是真正的解決方案。

您可以在所有瀏覽器中使用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> 

至於為什么使用float會發生這種情況，除非您另有說明，否則任何顯示塊都將占用分配的整個空間，即100％，其中一個div占用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>