如何将图像排列成可变列数的网格？

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>