css+div 经典布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <style type="text/css"> body{margin:0px;padding:0px;}*{margin:0px;padding:0px;}#mainDiv{width:596px;height:595px;margin:5px auto;}.block{overflow:hidden;display:inline;width:64px;height:64px;}.block01{overflow:hidden;display:inline;width:134px;height:134px;}.block02{overflow:hidden;display:inline;width:198px;height:198px;}.fl{float:left;}.fr{float:right;}.cls{clear:both;height:0px;overflow:hidden;} </style></head> <body><div id="mainDiv"><div style="background:#ffcc66;margin-left:268px;" class="block fl"></div></div></body></html>?
或许有人会说这个用绝对定位就可以很容易的实现，可是我要说这个小页面不是为了展示页面有多炫，而是完成的一个功能，css+div 可能会让你全部绝对定位去实现么？至少自动撑高度就不能实现。 这个例子如果你可以写出来，那所有的css+div布局的页面基本就不成问题了