圖像對齊

我對此很新，所以這可能看起來像是一個非常簡單的問題。圖像對齊

我已經開始設計自己的頁面，下面的代碼是我到目前爲止的地方。

它是如何看起來是...

左上角 - 我的標誌
右上角 - 導航
左邊 - 圖像/描述

什麼我想做，以及我陷入困境的地方，都會讓描述在每張圖片下完美對齊，並且在頁面上移動時也會發生同樣的情況。

當前正在發生的事情是，每張圖片和下面的描述在頁面左側一直向左對齊。

下面

當前代碼：

<body> 
    <div class="container"> 
    <a href="#"><img src="#" alt="Title" width="300" height="100" /></a> 
    <div id="navbar"> 
     <ul> 
     <li><a href="#">GALLERY</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">BLOG</a></li> 
     <li><a href="#">CONTACT</a></li> 
     </ul> 
    </div> 
    <div id="images"> 
     <img src="#" width="300" height="199" alt="name"></div> 
     <div id="descriptions">City</div> 
     <div id="images"> 
     <img src="#" width="300" height="199" alt="name"></div> 
     <div id="descriptions">Model</div> 
     </div> 
    </div> 
</body>

來源

2012-12-19 user1912669

嘗試使用表... –

@ chinna_82它不是表格數據。僅爲表格數據使用表格。有許多其他方式可以在沒有表格的情況下做到這一點。 –

我會用類似這樣的標記：

<figure class="images"> 
    <img src="#" width="300" height="199" alt="City"> 
    <figcaption>City</figcaption> 
</figure> 

<figure class="images"> 
    <img src="#" width="300" height="199" alt="Model"> 
    <figcaption>Model</figcaption> 
</figure> 

<figure class="images"> 
    <img src="#" width="300" height="199" alt="Foo"> 
    <figcaption>Foo</figcaption> 
</figure>

和一些示例CSS：

.images { 
    float: left; 
    width: 300px; 
    min-height: 200px; 
    margin: 0 10px 0 0; 
    background-color: #EEE; /* just to show containers since image scr is blank */ 
} 

.images:last-child { 
    margin-right: 0; 
} 

.images figcaption { 
    text-align: center; 
}

Fiddle

來源

2012-12-19 03:41:46 steveax

太棒了！它工作得很好！非常感謝。我還有其他一些問題：1）如果我想在左側有4個圖片的象限，上面的變化如何，基本上，頂部2張圖片和底部2張圖片; 2）如果我在左側有那個象限，並且想要在翻轉不同圖片的過程中在右側放置一段，我該怎麼辦？和3）如何擴展第一個圖像和導航欄在其他圖像周圍的白色背景顏色...我爲其餘圖像創建了一個帶有白色背景和灰色背景的容器。 – user1912669

@ user1912669對於第一種情況，您可以刪除'：last-child'規則並添加：'.images：nth-child（2）{margin-right：0; }'和一個額外的規則來清除浮動：'.images：nth-child（3）{clear：left; }'。您的其他問題可能最好作爲一個新問題處理。爲每一個創建一個簡明的例子，並創建新的問題。 – steveax

回答

相關問題