当前位置: 代码迷 >> HTML/CSS >> 如何排列图片
  详细解决方案

如何排列图片

热度:6433   发布时间:2013-02-26 00:00:00.0
怎么排列图片?
我想让图片以固定大小两个一排总共三排的现实,但是六张图片全部排在一列了,html和css代码如下:
<div class="thumbs_block"> 
<tr>
<td> <a href=''><img class="thumbs" src='1.jpg'/></td>
<td> <a href=''><img class="thumbs" src='2.jpg'/></td>
</tr>
<tr>
<td> <a href=''><img class="thumbs" src='3.jpg'/></td>
<td> <a href=''><img class="thumbs" src='3.jpg'/></td>
</tr>
<tr>
<td> <a href=''><img class="thumbs" src='2.jpg'/></td>
<td> <a href=''><img class="thumbs" src='2.jpg'/></td>
</tr>
</div>

css代码:

.thumbs_block {
width: 500px;
height: 500px;
}
.thumbs_block a {
width: 100px;
height: 100px;
display: block;
position:relative;
overflow: hidden;
}
.thumbs_block img {
width: 100px;
height: 100px;
position:relative;
}

------解决方案--------------------------------------------------------
把table标签加上

<div class="thumbs_block"> 
<table><tr>
<td> <a href=''><img class="thumbs" src='1.jpg'/></td>
<td> <a href=''><img class="thumbs" src='2.jpg'/></td>
</tr>
<tr>
<td> <a href=''><img class="thumbs" src='3.jpg'/></td>
<td> <a href=''><img class="thumbs" src='3.jpg'/></td>
</tr>
<tr>
<td> <a href=''><img class="thumbs" src='2.jpg'/></td>
<td> <a href=''><img class="thumbs" src='2.jpg'/></td>
</tr></table>
</div>
  相关解决方案