爲什麼div元素不會向上移動，當它上面的div浮動左邊時？

Question

我一直在研究浮動物業CSS。

這是我的html代碼：

.left { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 
.normal { 
 
    text-align: center; 
 
    width: 25%; 
 
}

<div class="left"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is left</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div> 
 
<div class="normal"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is normal</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div>

我想知道爲什麼我div與分類標準未與左類的div向上移動？

我問這個問題，因爲如果我寫一個

<p>something</p> 

後我班div留下的p tag移動向上內容，但這不與div發生.. 我想爲什麼這是發生？

Answer 1

第一個div寬25％，所以它佔用了可用空間的25％。
第二個div也是25％寬;因此第一個div佔據了第二個佔用的所有空間。沒有更多的空間了！

解決方案：使第二個div不是25％寬，但是50％（比第一個多25％）。

.left { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 
.normal { 
 
    text-align: center; 
 
    width: 50%; 
 
}

<div class="left"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is left</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div> 
 
<div class="normal"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is normal</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div>

Answer 2

嗨@Gopal辛格拉索

我相信我理解正確你的問題。

原因是因爲寬度設置在div上也有一個display：block，如果你改變display：block來flex，例如它會出現在它旁邊。如果你還在p標籤上設置寬度，它將和div一樣。

我希望這能回答你的問題。

Answer 3

的正常 DIV移動到頂部，正常的內容不：見正常擴展：

利斯特先生給你的解決方案：你需要使正常更寬，使內容將適合於左

.left { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 
.normal { 
 
    text-align: center; 
 
    width: 27%; 
 
    background-color: lightblue; 
 
    border: solid 1px blue; 
 
}

<div class="left"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is left</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div> 
 
<div class="normal"> 
 
    <img src="Icon.png"> 
 
    <h1>hi my name is normal</h1> 
 
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p> 
 
</div>