Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css div 3行3列图片自动排列代码

css div 3行3列图片自动排列代码

发布时间:2020-05-22   编辑:www.jquerycn.cn
jquery中文网为您提供css div 3行3列图片自动排列代码等资源,欢迎您收藏本站,我们将为您提供最新的css div 3行3列图片自动排列代码资源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.pic_div{
 width:110px;
 height:118px;
 float:left; 
 margin:5px 8px 5px 10px;
 text-align:center;
}
.pic_dd{
 border:1px solid #d7dedb;
 height:90px;
}
body,td,th {
 font-size: 12px;
}
</style>
</head>

<body>
<table width="677" height="236" border="1" align="center">
  <tr>
    <td valign="top" align="center">
 <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
 <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
  <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
  <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
  <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
 <!--第二行-->
<div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
 <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
  <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
  <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
  <div class="pic_div">
  <div class="pic_dd">
  </div><br />
 你好,房产!
 </div>
 </td>
  </tr>
</table>
</body>
</html>

您可能感兴趣的文章:
jQuery 幻灯片插件(带缩略图功能)
使用jquery插件实现图片延迟加载技术详细说明
js实现图片放大缩小功能后进行复杂排序的方法
jQuery图片展示插件 Easy Slide
Lazy Load 延迟加载图片的 jQuery 插件
学习使用dedecms5.6、5.7文章自动排版插件
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Lazy Load 延迟加载图片的jQuery插件中文使用文档
jQuery 选择表格(table)里的行和列及改变简单样式
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)

[关闭]