我可以通過哪種方式將圖像置於網格狀格式中？

我有大約12-15張圖片，我想在網格中排列在一起，每張圖片下面都有文字。我想過使用一張桌子，但我聽說這些桌子並不是現在最好的選擇。我嘗試了其他一些東西，但沒有任何東西看起來像我想要的那樣工作。我可以通過哪種方式將圖像置於網格狀格式中？

什麼，我希望它看起來像會是這樣的一個例子：

[----- -----圖片] [----- -----圖片] [-----圖像-----] [-----圖像-----] ---行1

（ - 描述 - ）（ - 描述 - ）（ - 描述 - ）（-Description-）

[-----圖片-----] [-----圖片-----] [-----圖片-----] [ -----圖片-----] ---第2行

（ - 描述 - ）（ - 描述 - ）（ - 描述 - ）（ - 描述 - ）

等等......

除了表，我應該看看使用其他一些方法？任何建議或參考將有所幫助。

來源

2010-04-01 Peter

您使用什麼語言？ – 2010-04-01 18:37:41

這是否用於HTML？圖像是否動態加載？你能給我們更多的信息嗎？ – Ascalonian 2010-04-01 18:38:35

crimson_penguin正是我所需要的。我只是想避免使用表格，並通過使用每張圖片的div，我完全可以避免使用表格。但是，爲了回答你的問題，我一直在尋找解決這個問題的方法。 – Peter 2010-04-03 20:44:44

HTML：

 
<div class="floated_img"> 
    <img src="img.jpg" alt="Some image"> 
    <p>Description of above image</p> 
</div> 
<div class="floated_img"> 
    <img src="img2.jpg" alt="Another image"> 
    <p>Description of above image</p> 
</div>

CSS：

 
.floated_img 
{ 
    float: left; 
}

你可能希望有更多的款式，但應該做的基本上是你想要的。

來源

2010-04-01 18:43:30

太簡單了！真棒。我在這裏應用了這個：http://nancyboszhardtinc.com/press/（稍微擺弄了一些Wordpress圖庫之後）。 – ATSiem 2013-02-20 04:28:50

一個網格格式？聽起來像是一張桌子給我。如果您將它們用於實際上是表格的表格，則表格沒有任何問題。

來源

2010-04-01 18:41:58

網格！=一張桌子。一列中的照片是否有相互邏輯關聯？如果答案是YES，請使用表格。如果答案是否定的，它只是一個網格，應該使用CSS完成。 – 2010-04-01 18:58:39

既然你說格子，這意味着高度和寬度將被固定。

一個內聯塊可能對你很好。我發現他們比浮標更容易處理。而且，內聯塊尊重繼承align屬性（所以你可以讓他們集中）

CSS

.grid_element { 
    display: inline-block; 
    width: 200px; 
    height:200px; 
    zoom: 1;   /* for IE */ 
    display*:inline; /* for IE */ 
}

然而，inline-block的元素可能無法在舊版瀏覽器的工作這麼好。

一些閱讀：
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html

來源

2010-04-01 18:56:37

我可以通過哪種方式將圖像置於網格狀格式中？

回答

相關問題