小经验大作用 用CSS解决布局难题

【 tulaoshi.com - Web开发 】

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