CSS布局的一些小经验


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文件)。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3