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

Answer 2

是的，你可以;这是一个例子：

<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将全部放在150px宽的列中

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

2 个答案: