利用图片进行定位

利用图片进行定位

左直拳

 

好多人说，现在页面是用DIV + CSS 来定位，可以完全抛弃TABLE了。在我看来，这纯粹是扯蛋。扯蛋，意思就是用嘴含着阴囊的皮，向旁边扯去。

不过，用TABLE来定位，有时也会有点问题。比如说，定义一个列表，有三列，其中有两列的宽度固定，放些“编辑”、“浏览”之类的文字，而另一列放标题，相对比较宽。如下：

<table width="90%" border="1">

<tr><td>标题</td><td style="width:50px">&nbsp;</td><td style="width:50px">&nbsp;</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>&nbsp;</td><td>&nbsp;</td></tr>

<tr><td>长洲宾客人数多</td><td align="center">浏览</td><td align="center">编辑</td></tr>

</table>

这样子不论所在页面如何缩放拉伸，”浏览，“编辑”都不会变形。

原理如下:第一列(标题列)宽度为100%,所以会拼命扩张;但浏览和编辑列有两张图片在,而图片是不会折叠的，所以这两列刚刚好撑住了图片指定宽度的空间.以后页面缩放，其实变的只是标题列的宽度，刚好符合我们的要求