內聯塊div對齊到什麼程度？

Question

我以爲每個inline-block元素都對齊一行，根據其個人vertical-align的值。

但是，我們似乎可以根據文本內部的位置來獲取元素。

讓我們舉一個例子

.icon-card { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    width: 18%; 
 
} 
 

 
.section1 .icon-card { 
 
    vertical-align: top; 
 
} 
 

 
.section2 .icon-card { 
 
    vertical-align: baseline; 
 
} 
 

 
.section3 .icon-card { 
 
    vertical-align: baseline; 
 
} 
 

 
.section1, 
 
.section2, 
 
.section3 { 
 
    width: 260px; 
 
}

<div class='section1'> 
 
    <div class='icon-card' style='height:50px'> 
 
    </div> 
 
    <div class='icon-card' style='height:80px'> 
 
    </div> 
 
    <div class='icon-card' style='height:40px'> 
 
    </div> 
 
    <div class='icon-card' style='height:200px'> 
 
    </div> 
 
</div> 
 
<div class='section2'> 
 
    <div class='icon-card' style='height:50px'> 
 
    </div> 
 
    <div class='icon-card' style='height:80px'> 
 
    </div> 
 
    <div class='icon-card' style='height:40px'> 
 
    </div> 
 
    <div class='icon-card' style='height:200px'> 
 
    </div> 
 
</div> 
 
<div class='section3'> 
 
    <div class='icon-card' style='height:50px'> 
 
    Not 
 
    </div> 
 
    <div class='icon-card' style='height:80px'> 
 
    Quite what 
 
    </div> 
 
    <div class='icon-card' style='height:40px'> 
 
    I 
 
    </div> 
 
    <div class='icon-card' style='height:200px'> 
 
    want 
 
    </div> 
 
</div>

（或見https://jsfiddle.net/tqgqrd9a/4/）

在這個例子中，我們有section2和section3，認爲 「應該」 排列相同。他們爲什麼不呢？到底是怎麼回事？

理想情況下，我更喜歡解釋發生了什麼的答案，並告訴我「我應該學會它」的位置。

Answer 1

我無法解釋這非常好，但我的理解是，我會給我最好的拍攝

這裏混淆的部分是它vertical-align: baseline指文本的基線。在第2節中沒有文字，因此基線只是父母的最低點（最高容器決定了這一點）。

第3部分，因爲您有文本，因此這些框在文本的基線處排成一行。文本的基線是每個框中所有文本的最低點（通常是文本數量最多的文本）。第3節中的每個框都從文本開始的位置開始，因爲您的框中有高度，所以文本溢出框並且基線成爲每個框中所有文本的最低點，在我們的案例框1和框2中都有形成基線的線數相同。如果向其中的一個添加更多文本，則會看到對齊方式也會發生變化，因爲基線會因文本更多而發生變化。

如果你把overflow: hidden上.icon-card則第2和3是一樣的，因爲文本不溢出，基線是父的最低點（因爲文本不能再低了，由於溢出隱藏）。

不知道這是否是一個很好的解釋，但我希望你能理解它。

這裏有些文檔

https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

https://css-tricks.com/what-is-vertical-align/