blog 发表于 2007-6-29 23:57:52

用户模板版面错位解决方法

大家可能发现一些模板在使用的过程中出现错位现象,如下图:

http://bbs.oblog.cn/skins/default/filetype/gif.gif此主题相关图片如下:
http://bbs.oblog.cn/UploadFile/2007-5/200751415523317300.gif

一般出现这种情况的模板都是使用DIV+CSS制作的,那么是什么原因造成版面错位的呢?
有两个原因,第一是文章截取文字出了问题(就是发表文章页面高级选项的“部分显示字数 500”)

http://bbs.oblog.cn/skins/default/filetype/gif.gif此主题相关图片如下:
http://bbs.oblog.cn/UploadFile/2007-5/200751415541119244.gif
因为截取文章的时候由于各种原因把文章内容当中的标签截取了一半,这样就造成了模板HTML标签不完整,也就错位了.

第二是文章内容有比较大的图片,把内容区域给撑开了。

http://bbs.oblog.cn/skins/default/filetype/gif.gif此主题相关图片如下:
http://bbs.oblog.cn/UploadFile/2007-5/2007514162375453.gif

解决方法就从这两点入手.
第一点解决方法:
给用户模板的副模板的"$show_logtext$"标签外面套一个表格,为:
<table><tr><td>$show_logtext$</td></tr></table>
这样的话即使截取HTML代码有不完整的地方也因为外面有个表格使其整体不会受到影响.
第二点解决方法:
给侧边区域和内容区域的层设置overflow-x:hidden;属性,这样的话,即使内容区域有超过其层本身宽度的图片(内容)这个层也不会被撑大,不会被撑大就不会错位.

http://bbs.oblog.cn/skins/default/filetype/gif.gif此主题相关图片如下:
http://bbs.oblog.cn/UploadFile/2007-5/200751416143012989.gif

veolia 发表于 2007-7-3 21:24:30

还有第三种原因,博客模板本身的问题
而这种原因的错位恰恰在东陆博客系统里就出现了
具体讲来就是“绿色生活”,
解决方法也简单,改主模板,源码,把侧边条width值改小。
这里原始值为200,改到199便不会有错位了

郑俊雅策划 发表于 2009-12-4 09:13:13

楼主,这帖子真有意思,期待有人继续看看……
页: [1]
查看完整版本: 用户模板版面错位解决方法