div+css访百分比表格
因为要做所有频道的页面，会涉及到表格的问题，当时想用表格来做，又省时又省力（的确应该用表格，必竟div的方式又不是万能的，该用表格的时候就要用），可是俺就想试试div来控制。形如：
<div>
<ul>
<li>频道名称</li>
<li>所属网站</li>
<li>最后更新时间</li>
<li>用户操作</li>
</ul>
</div>
结果出现了问题，如果表格有三行四列，数据部分的第一行第一列是四个字，第二行第一列是3个字母加四个字，因为同样是百分比的方式，所以后面的所列项就会不对齐，导致后边的列项也同样不对齐，图示见：http://bbs.51js.com/viewthread.php?tid=56293
想了半于没有结果，在51js上问了一下版主，他的方法是这样地：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML中的表格介绍及表格的模拟 - Beautiful Style « 样式之美 » </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<meta name=”KEYWords” content=”css,xhtml” />
<meta name=”DEscription” content=”CSS” />
<meta name=”author” content=”RotUI” />
<meta content=”all” name=”robots” />
<link rel=”start” href=”http://www.rotui.net” title=”Home” />
<style type=”text/css”>
ol.art{
list-style-type :none;
}
ol.art li{
clear:both;/*清行*/
}
ol.art li a{
width:500px;/*定义宽度只是发了对齐*/
float:left;display:inline;/*不能路过就浮过吧*/
}
ol.art li address{
width:100px;
font-style : normal;/*中文斜体不是很好看的说*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}
ol.art li strong {
font-style : normal;
width:50px;
float:right;display:inline;
font-weight:normal;
}
</style>
<body>
我改EOE的
<ol class=”art”>
<li><strong>编辑</strong><a href=”#” title=”…”>[原创:JS]由浅到深了解JavaScript类</a><address>笨红</address><i>2-9</i></li>
<li><strong>编辑</strong><a href=”#” title=”…”>[原创:CSS]正确认识html与body </a><address>一叶千鸟</address><i>2-8</i></li>
<li><strong>编辑</strong><a href=”#” title=”…”>[灌水:泡MM]没有MM的日子怎样过</a><address>嗷嗷</address><i>2-8</i></li>
<li><strong>编辑</strong><a href=”#” title=”…”>……..</a><address>….</address><i>….</i></li>
</ol>
</body>
</head></html>
点击这里看效果
同时，我的方法也同来了，和他差不多，但更符合我自己的想法，如下：
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″>
</meta><meta name=”generator” content=”PSPad editor, www.pspad.com”>
<title>表格测试</title>
<style>
#channel {
margin:0;
padding:0;
width:97%;
}
#channel ul {
margin:0;
padding:0;
list-style:none;
}
#channel li {
display:inline;
position:relative;
}
#channel ul.colordd {
background-color:#F5F5F5;
}
</style>
</meta></head>
<body>
<div id=”channel”>
<ul class=”colordd”>
<li style=”margin:6px 0 0 3%;padding:0;”>国际新闻</li>
<li style=”display:block;margin:-18px 0 0 20%;padding:0;”>新浪网</li>
<li style=”display:block;margin:-18px 0 0 40%;padding:0;”>2006.01.31 23:21:12</li>
<li style=”display:block;margin:-18px 0 0 80%;;padding:0″>查看</li>
</ul>
<ul>
<li style=”margin:6px 0 0 3%;padding:0;”>互联网安全</li>
<li style=”display:block;margin:-18px 0 0 20%;padding:0;”>计算机世界</li>
<li style=”display:block;margin:-18px 0 0 40%;padding:0;”>2006.01.23 23:31:10</li>
<li style=”display:block;margin:-18px 0 0 80%;;padding:0″>查看</li>
</ul>
<ul class=”colordd”>
<li style=”margin:6px 0 0 3%;padding:0;”>World Business</li>
<li style=”display:block;margin:-18px 0 0 20%;padding:0;”>New York Times</li>
<li style=”display:block;margin:-18px 0 0 40%;padding:0;”>2006.01.23 23:31:10</li>
<li style=”display:block;margin:-18px 0 0 80%;;padding:0″>查看</li>
</ul>
<div>
</div></div></body>
</html>
这里看效果
基本上和table+td的效果差不多，为了不影响整体布局，使表格在伸缩后，不换行，另外加上对文字的控制会更好一些，就可以在超出的文字部分替换成“…”。但firefox下对 text-overflow:ellipsis;的支持不太好。
