內嵌塊CSS屬性的對齊問題

我試圖在網站上創建一個網格菜單。我使用display: inline-block這樣做，它工作得很好，但由於某種原因，最後一行不排隊。

我試過display: inline-table它工作得很好，但也有同樣的問題。每個包含文本的正方形都包含在具有顯示屬性設置爲內嵌塊的div內。

<div class="parcel"> 
    <a href="http://www.pizzahut.com"> 
    <img src="../img/computerGraphics.jpg"/> 
    Computer Graphics </a> 
</div> 
<div class="parcel"> 
    <img src="../img/web.jpg"/> 
    Web 
</div> 
<div class="parcel"> 
    <img src="../img/photography.jpg"/> 
    Photography 
</div> 
<div class="parcel"> 
    <img src="../img/models.jpg"/> 
    3D Modeling 
</div> 
<div class="parcel"> 
    <img src="../img/games.jpg"/> 
    Games 
</div> 
<div class="parcel"> 
    <img src="../img/graphicDesign.jpg"/> 
    Visual Design 
</div> 
<div class="parcel"> 
    <img src="../img/animation.jpg"/> 
    Animation 
</div> 
<div class="parcel"> 
    <img src="../img/illustration.jpg"/> 
    Illustration 
</div> 
<div class="parcel"> 
    <img src="../img/other.jpg"/> 
    Other 
</div>

有沒有人知道爲什麼最後一行會做到這一點？

來源

2011-09-06 Russell Strauss

你能提供一個網頁的URL（如果可能的話）？因爲看到任何可能導致此問題的問題都會更容易。 – Nathan

我在這裏上傳了一個臨時鏈接： http://www.prism.gatech.edu/~jstrauss6/jrstrauss.net%20temp/original/myWork.html –

或者是否有一種替代方法來完成相同的任務？ –

text-align: justify;您的contentText div會導致小divs之間有空格，具體取決於div的內容。嘗試刪除text-align: justify;或從contentText更改爲text-align:center，它會正常工作。

雖然我覺得這很奇怪，但我試過使用justify，最後一行總是沒有理由像在報紙上。

來源

2011-09-06 01:06:27 dpp

+1好抓... –

+1這是100％正確的...我只是將其更改爲'文本對齊：中心;'在Chrome開發人員工具，它的工作。看到這個截圖：http://screencast.com/t/CWZ93DYVbgh – Nathan

偉大的眼睛。非常感謝。 –

很難說沒有看到額外的HTML和CSS，但它可能會在最後一次關閉div前導致最後一行呈現不同的情況下，您有鏈接中斷或某些空白或其他元素。

編輯

看了一下你貼剛纔和@domanokz是正確的頁面：改變

div.contentText { 
    text-align: justify; 
}

到

div.contentText { 
    text-align: center; 
}

還刪除了額外的br，雖然這個修復沒有必要。

來源

2011-09-06 00:48:55

內嵌塊CSS屬性的對齊問題

回答

相關問題