0

我目前有一个 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 只拥有一堆divs 然后将它们排列为具有任意列数的网格，这样我每次想要更改网格数时就不必重新构建整个页面.

4

2 回答 2

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>
于 2012-10-24T17:35:26.860 回答
0

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

<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 宽的列中

于 2012-10-24T17:34:29.873 回答