内容优先的 CSS 三列布局
这样的布局可以确保中间内容首先被下载，也更有利于SEOwidth、margin等变量的修改注意参考注释
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title></title> <style type="text/css"> .root { width: 960px; margin: 0 auto; } .center, .left, .right { float: left; display: inline; } .center { width:100%; background-color: #e9967a; } /* margin-left = .left, margin-right = .right */ .center .content { margin: 0 250px 0 150px; padding: 10px;background-color: #60A179; } /* margin-left = .root */ .left { width: 150px; margin-left: -960px; background-color: blue; } /* margin-left = -(.right) */ .right { width: 250px; margin-left: -250px; background-color: orange; } </style></head><body> <div class="root"> <div class="center"> <div class="content"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> </div> <div class="left"> <p>left</p> <p>left</p> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div></body></html>
http://dl.iteye.com/upload/attachment/0076/1598/c2d6558f-adc1-3035-b8c6-4ee4f5c58c21.png
页:
[1]