利用图片进行定位
左直拳
好多人说,现在页面是用DIV + CSS 来定位,可以完全抛弃TABLE了。在我看来,这纯粹是扯蛋。扯蛋,意思就是用嘴含着阴囊的皮,向旁边扯去。
不过,用TABLE来定位,有时也会有点问题。比如说,定义一个列表,有三列,其中有两列的宽度固定,放些“编辑”、“浏览”之类的文字,而另一列放标题,相对比较宽。如下:
<table width="90%" border="1">
<tr><td>标题</td><td style="width:50px"> </td><td style="width:50px"> </td></tr>
<tr><td>长洲宾客人数多</td><td align="center">浏览</td><td align="center">编辑</td></tr>
</table>
标题 | ||
长洲宾客人数多 | 浏览 | 编辑 |
这样一来,如果页面缩放拉伸,“浏览”、“编辑”这些文字就有可能变形,缩成一对,由一行变两行。其实我们最希望的结果是:“标题”栏随页面自动伸缩,而“”浏览,“编辑”栏固定。
怎么试都不成功,看来只能用图片了。
在开头增加一行:
<table width="90%" border="1">
<tr><td style=”width:100%;”></td><td><img src=”很小的图片” width=”50px” height=”0px” alt=””/></td><td><img src=”很小的图片” width=”50px” height=”0px” alt=””/></td></tr>
<tr><td>标题</td><td> </td><td> </td></tr>
<tr><td>长洲宾客人数多</td><td align="center">浏览</td><td align="center">编辑</td></tr>
</table>
这样子不论所在页面如何缩放拉伸,”浏览,“编辑”都不会变形。
原理如下:第一列(标题列)宽度为100%,所以会拼命扩张;但浏览和编辑列有两张图片在,而图片是不会折叠的,所以这两列刚刚好撑住了图片指定宽度的空间.以后页面缩放,其实变的只是标题列的宽度,刚好符合我们的要求