float left div with text shift down

Question

我在學習css並有一個查詢。當我浮動左divs，然後他們坐在一條平直的水平線，但有一些文本內的任何他們移動它垂直移動。我google搜索，但無法找到一個很好的解釋。請幫我理解它爲什麼會發生。

div#red { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
div#blue { 
 
    width: 25px; 
 
    height: 25px; 
 
    border: 1px solid blue; 
 
} 
 
div#green { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid green; 
 
} 
 
.box { 
 
    display: inline-block; 
 
}

<div class="box" id="red"> 
 

 
</div> 
 
<div class="box" id="blue"> 
 
    Tri 
 
</div> 
 
<div class="box" id="green"> 
 

 
</div>

Answer 1

您可以添加到vertical-align: bottom.box：

div#red { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
} 
 
div#blue { 
 
    width: 25px; 
 
    height: 25px; 
 
    border: 1px solid blue; 
 
} 
 
div#green { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid green; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
}

<div class="box" id="red"> 
 

 
</div> 
 
<div class="box" id="blue"> 
 
    Tri 
 
</div> 
 
<div class="box" id="green"> 
 

 
</div>