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

转自网络

方案一：
<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>

转载于:https://www.cnblogs.com/asyuras/archive/2007/10/13/922970.html