html div转换表格,html – 如何将此表格布局转换为div布局？

见：

http://jsfiddle.net/thirtydot/kBHCR/

如您所见,当调整.Window的宽度和高度时,所有内容都会调整大小.

这将适用于IE7和所有现代浏览器.

它公然在IE6中不起作用.如果你需要支持IE6,你可以只为IE6使用JavaScript,或者你可以坚持使用< table>.如果你想支持IE6,需要付出代价.

CSS：

.Window {

width: 600px;

height: 500px;

background-color: rgb(0,0,0);

position: relative;

}

.Window-Top {

height: 50px;

position: absolute;

top: 0;

left: 0;

right: 0;

background-color: rgb(128,128,128);

background-image: -webkit-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);

background-image: -moz-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);

background-image: -o-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);

background-image: -ms-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);

}

.Window-Bottom {

height: 50px;

position: absolute;

bottom: 0;

left: 0;

right: 0;

background-color: rgb(0,128,128);

}

.Window-Content {

position: absolute;

top: 50px;

bottom: 50px;

left: 0;

right: 0;

}

.Window-Content-Left {

width: 150px;

position: absolute;

top: 0;

bottom: 0;

left: 0;

background-color: rgb(255,0,0);

}

.Window-Content-Right {

width: 150px;

position: absolute;

top: 0;

bottom: 0;

right: 0;

background-color: rgb(0,0,255);

}

.Window-Content-Content {

position: absolute;

top: 0;

bottom: 0;

left: 150px;

right: 150px;

background-color: rgb(0,255,0);

}