HTML布局怎么做一个图片库呢？

1、准备好图片标签栗泪秤，一个DIV，一个SPAN标签，然后图片说明，结构代码如下：

<div class="pic">

<img src="/i/tulip_ballade_s.jpg" alt="">

<div>

<span>图片说明</span>

</div>

</div>

2、给图片蚊掩添加样式，并岔霸且在文本DIV也添加样式，代码如下：

.pic{

border: 1px solid red;

padding: 15px;

width: 160px;

}

.pic div{

text-align: center;

}

3、整合代码，将pic的宽度设置成跟图片的宽高一样，这样使得图片跟文字的描述都能够在同一水平线上，效果如下