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>