您的位置:首页 > Web前端 > CSS

用css+div实现表格的每行显示3列的功能

2007-10-13 09:00 453 查看
转自网络

方案一:
<style type="text/css">
.csstb{font-size:12px;width:600px;}
.csstb div,
.csstb li{
float:left;
width:198px;
line-height:20px;/*行高*/
border:#999 solid 1px;}
.csstb ul{margin:0;padding:0;list-style:none;}
</style>

<div class="csstb">
<div>第1行第1列</div>
<div>第1行第2列</div>
<div>第1行第3列</div>
<div>第2行第1列</div>
<div>第2行第2列</div>
<div>第2行第3列</div>
<div>第3行第1列</div>
<div>第3行第2列</div>
<div>第3行第3列</div>
</div>
<br />
上面这样DIV有点不知道是什么感觉,本身DIV是一个结构,这样的结构我觉得不好<br />
下面是修改过的用LI列表,其实一样的
<br />

<div class="csstb">
<ul>
<li>第1行第1列</li>
<li>第1行第2列</li>
<li>第1行第3列</li>
<li>第2行第1列</li>
<li>第2行第2列</li>
<li>第2行第3列</li>
<li>第3行第1列</li>
<li>第3行第2列</li>
<li>第3行第3列</li>
</ul>
</div>

方案二:

<style type="text/css">
#d1 span{ width:197px; height:18px; float:left; border:solid 1px blue;}
</style>

<div style="width:600px; height:60" id="d1">
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: