六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 75|回复: 0

利用图片进行定位

[复制链接]

升级  36.35%

563

主题

563

主题

563

主题

探花

Rank: 6Rank: 6

积分
1727
 楼主| 发表于 2013-1-29 07:30:38 | 显示全部楼层 |阅读模式
利用图片进行定位

左直拳



好多人说,现在页面是用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%,所以会拼命扩张;但浏览和编辑列有两张图片在,而图片是不会折叠的,所以这两列刚刚好撑住了图片指定宽度的空间.以后页面缩放,其实变的只是标题列的宽度,刚好符合我们的要求



您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表