Word Break推下一個下來

Question

我使用display: inline-block來顯示我的帖子，每當有一個長名字，需要打開第二行時，它會將下一個li向下推。我不完全確定它爲什麼這樣做？

代碼：

<li> 
    <div class="thumbnail"></div> 
    <div class="title"></div> 
</li> 

---

.li { 
    display: inline-block; 
    margin: 7px; 
    padding-bottom: 40px; 
} 

.thumbnail { 
    width: 240px; 
    height: 240px; 
    overflow: hidden; 
    background-position: center center; 
    background-size: cover; 
} 

.title { 
    padding-top: 10px; 
    max-width: 240px; 
    text-align: center; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-family: 'MavenProMedium'; 
    font-size: 18px; 
} 

Answer 1

簡而言之vertical-align: top您li秒。

發生這種情況是因爲內嵌塊元素是內聯的。它表現爲一種內嵌的方式（除了具有像「box-model」這樣的塊屬性），所以像line-height，vertical-align,text-align等等對它有影響。

Answer 2

我發現有用的另一個解決方案是在li元素上將'inline-block'切換爲'inline-flex'。 我承認我並不真正瞭解其中的差異，只是在不同價值的螢火蟲中玩耍。 無法在舊版瀏覽器上運行，不確定。