小结第一种方法：
关于这个布局，作者是这样说明的：“left和right都贴住左侧。设置left在right上面(z-index)；在right内加个放内容的层(content)；设置content距离right的左侧为200px，即刚巧等于left的宽度。”
这个布局有一个缺点就是，如果我设置了foot的div，试了很多办法，都不能根据content的高度，连着中间的内容，自动置于HTML页面的底部。如有牛人知道解决方法，望留言解答。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> * {margin:0; padding:0; list-style:none; } .header{ width:100%;height:250px;background-color:#33FF00;} .logo{width:100%;height:200px;background-color:#330000;} .nav{width:100%;height:50px;background-color:#660000;} .wrapper {width: 100%; } .left {width:200px; height:auto;background:#fcc; position:absolute; left:0;z-index:1;} .right {width:100%; height:400px;background:#ccc; position:absolute; left:0;} .content {height:400px;margin-left:200px; background:#ffc; } .foot { position:absolute;height:100px;background-color:#000000;bottom:0;} .foot h1, .foot p{color:#FFFFFF;} </style> </head> <body> <div class="wrapper"> <div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="left"> <h1>Left</h1> <p>左侧固定宽度200px</p> </div> <div class="right"> <div class="content"> <h1>Content</h1> <p>右侧宽度自动适应</p> </div> </div> <div class="foot"> <h1>Foot</h1> <p>想看看他的位置会在哪？</p> </div> </div> </body> </html>
小结
|
