如何將圖像排列成可變列數的網格？

Question

我目前有一個HTML頁面，其中包含圖像和一些垂直順序的文本。

<div> 
<img src="img/img1.jpg"/> 
Dr. XYZ 
</div> 

<div> 
<img src="img/img1.jpg"/> 
Dr. XYZ 
</div> 

<div> 
<img src="img/img1.jpg"/> 
Dr. XYZ 
</div> 

我想要做的是將圖像排列成網格。我知道如果我想創建兩列的網格，我可以使用兩列的表格。

但是，我不想對此進行硬編碼？是否有另一種方式使用JavaScript/CSS只有一堆div s，然後將它們排列成任意數量的列的網格，以便我不必每次重新構造整個頁面時，我想要更改網格。

Answer 1

是的，你可以;這裏有一個例子：

<div class="parent"> 
    <div class="item"> 
    <img src="img/img1.jpg"/> 
    Dr. XYZ 
    </div> 
    <div class="item"> 
    <img src="img/img1.jpg"/> 
    Dr. XYZ 
    </div> 
    <div class="item"> 
    <img src="img/img1.jpg"/> 
    Dr. XYZ 
    </div> 
    .... 
    <div class="clear"></div> 
</div> 

你的CSS：

.parent { 
    width:900px; /** Just an example **/ 
} 
.clear { 
    clear:both; 
} 

.item { 
    float:left; 
    width:150px; /** Just an example **/ 
    margin:3px; 
} 

現在用圖像您的div都將是150像素寬

Answer 2

列，您可以更改以下在網格中顯示它們-like pattern

<div style"display:inline-block; float:left"> 
    <img src="img/img1.jpg"/> 
    Dr. XYZ 
</div> 

然後，您可以通過更改包含DIV的寬度來控制行數將DIV與圖像聯繫起來。

<div id="container" style="width:500px"> 
    <div style"display:inline-block; float:left"> 
     <img src="img/img1.jpg"/> 
     Some text 1 
    </div> 
    <div style"display:inline-block; float:left"> 
     <img src="img/img2.jpg"/> 
     Some text 2 
    </div> 
</div>