小经验大作用 用CSS解决布局难题
发布时间:2006-03-24 23:39:25 来源:天极网 网友评论 0 条1.在一个div内嵌套两个div.
<div id="1">
<div id="2"></div>
<div id="3"></div>
</div>
css
#1 { width:100%;background:blue;}
#2 { width:100%;background:red;}
#3 { width:100%;background:green;}
当div2,3里面没有异常的内容的时候,显示一切正常,但是当Div3里放一个超过屏幕宽度的图片时,div1会自动扩展,但是div2不会。这就使得显示很难看。如果用表格,div2和div3分别是两个tr,那么不存在这个问题。
这个问题怎么解决?
2. 左中右三个div
<div id="left "></div>
<div id="right "></div>
<div id="center "></div>
css
#left {float:left; position:relative; width:200px; left:0px;background: red;}
#right {float:right; position:relative; width:200px; right:0px;background: green;}
#center{margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;background: blue;}
这是一个很简单的左右侧固定中间自适应布局。
但是同样,你在center div里放一个超大的图片,看看会怎么样?中间一片白,centerdiv被挤到下面去了
用table,一行3个td就解决了这个问题。右侧的td会被挤到屏幕外面,但是总体布局不会乱
用div+css布局的确好,我减少了我的网站至少60%的html。
但是div在自适应和异常处理上面,我没找到好的的方法。
当然,有的人可能说,为什么要放一个超大的图片?我的回答是,这是用户输入。我是做程序出身,对于软件来说,你永远也想象不到用户会输入什么样的数据.....所以我们的软件/页面的容错性必须要好。Table,就我目前看来,在容错这个问题上,远好于div
希望有高人能解决我这个问题。
在这个问题上,我希望达到的效果就是,当中间列超宽的时候,能把右列挤到屏幕以外去,但仍然保持水平的布局关系,不要错开。
问题3:高度的自适应
还是三列(或两列)的布局。在不考虑有什么超大的图片的情况下。是比较容易实现宽度自适应的布局的。但是如果左/中/右的背景色不一样怎么办?如何实现看起来各栏的高度是一样的?当然,有解决方法,我会,但是,如果不是背景色,是垂直平铺的背景图片怎么办?如何实现三栏(或两栏)的背景高度看起来是一致的?
请别讨论在后台怎么处理的问题了,我想知道的就是,这几个问题,在不用表格布局的前提下,用Div+CSS能不能实现,而且至少要保证IE+FF的兼容性(可以是不同的CSS文件)。
<div id="1">
<div id="2"></div>
<div id="3"></div>
</div>
css
#1 { width:100%;background:blue;}
#2 { width:100%;background:red;}
#3 { width:100%;background:green;}
当div2,3里面没有异常的内容的时候,显示一切正常,但是当Div3里放一个超过屏幕宽度的图片时,div1会自动扩展,但是div2不会。这就使得显示很难看。如果用表格,div2和div3分别是两个tr,那么不存在这个问题。
这个问题怎么解决?
2. 左中右三个div
<div id="left "></div>
<div id="right "></div>
<div id="center "></div>
css
#left {float:left; position:relative; width:200px; left:0px;background: red;}
#right {float:right; position:relative; width:200px; right:0px;background: green;}
#center{margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;background: blue;}
这是一个很简单的左右侧固定中间自适应布局。
但是同样,你在center div里放一个超大的图片,看看会怎么样?中间一片白,centerdiv被挤到下面去了
用table,一行3个td就解决了这个问题。右侧的td会被挤到屏幕外面,但是总体布局不会乱
用div+css布局的确好,我减少了我的网站至少60%的html。
但是div在自适应和异常处理上面,我没找到好的的方法。
当然,有的人可能说,为什么要放一个超大的图片?我的回答是,这是用户输入。我是做程序出身,对于软件来说,你永远也想象不到用户会输入什么样的数据.....所以我们的软件/页面的容错性必须要好。Table,就我目前看来,在容错这个问题上,远好于div
希望有高人能解决我这个问题。
在这个问题上,我希望达到的效果就是,当中间列超宽的时候,能把右列挤到屏幕以外去,但仍然保持水平的布局关系,不要错开。
问题3:高度的自适应
还是三列(或两列)的布局。在不考虑有什么超大的图片的情况下。是比较容易实现宽度自适应的布局的。但是如果左/中/右的背景色不一样怎么办?如何实现看起来各栏的高度是一样的?当然,有解决方法,我会,但是,如果不是背景色,是垂直平铺的背景图片怎么办?如何实现三栏(或两栏)的背景高度看起来是一致的?
请别讨论在后台怎么处理的问题了,我想知道的就是,这几个问题,在不用表格布局的前提下,用Div+CSS能不能实现,而且至少要保证IE+FF的兼容性(可以是不同的CSS文件)。
- 推荐阅讯
- 玩转CSS CSS精彩实例教程(一)
- 网页设计中如何使用嵌套的框架集
- CSS应用技巧十四例
- CSSVault推荐的130个CSS布局站点
- 用css实现文字的自动隐藏
- 玩转CSS CSS精彩实例教程(二)
- 网页常见可用性错误——文案错误
- 像表格table一样轻松布局div层
- CSS实现当前页的滑动门菜单效果方法
- 从基础开始:CSS实用教程(三)
- 阅读排行
- 1.如何使用CSS来进行网页排版
- 2.CSS样式表教程-If you love css …
- 3.CSS用样式表美化你的网页
- 4.网页制作:几种所见所得的WEB在线编辑器
- 5.网页常见可用性错误——表单组件错误
- 6.CSS+JavaScript打造超酷右键菜单
- 7.针对浏览器隐藏CSS之九大技巧
- 8.DIV+CSS网页布局入门
- 9.搜索引擎的蜘蛛人(ROBOTS)秘密
- 10.CSS垂直树形下拉菜单
- 专题教程
- Windows Server-Windows Server文档-Windows Server新闻-Windows Ser PostgreSQL-PostgreSQL文档-PostgreSQL新闻-PostgreSQL专家
- WebLogic-WebLogic文档-WebLogic新闻-WebLogic专家 FreeBSD-FreeBSD文档-FreeBSD新闻-FreeBSD专家
- Linux-内核 GUI KDE Gnome DNS FTP 安全 安装-Linux专区 Windows-AD IIS ServerCore 虚拟化 安全 HPC-Windows专区
- 大话G游 专题:手机病毒揭密
- ARP攻击防范与解决方案 路由故障处理手册
