Javascript 如何将图像排列为具有可变列数的网格？

我目前有一个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>

XYZ博士
XYZ博士
XYZ博士

我想做的是将图像排列成网格。我知道如果我想创建具有两列的网格，我可以使用具有两列的表

---

但是，我不想硬编码这个？是否有另一种方法可以使用Javascript/CSS，只需拥有一堆

div

s，然后将它们排列成具有任意列数的网格，这样我就不必每次更改网格数时都重新构造整个页面。

可以；以下是一个例子：

<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>

---

现在，所有带有图像的div都将位于一列150px宽的

中，您可以更改以下内容以网格模式显示它们

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

XYZ博士

然后，可以通过更改包含带有图像的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>

一些文本1
一些文本2

<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>