标签:
两列布局(左侧宽度固定,右侧自适应)
例如:
<!doctype html> <html> <head> <title>左部宽度固定,右部自适应</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0px; padding:0px; font-size:14px; } div{ height:600px; } .left{ width:300px; background:red; float:left; } body div.right{ background:green; margin-left:300px; } </style> <link rel="stylesheet" type="text/css" href=""/> </head> <body> <div class="left">左部</div> <div class="right">右部</div> </body> </html>
三列布局,(左右宽度固定,中间自适应);
<!doctype html> <html> <head> <title>左右宽度固定,中间自适应</title> <meta charset="utf-8"/> <style type="text/css"> *{ margin:0px; padding:0px; font-size:14px; } div{ height:700px; } .left{ width:300px; background:red; float:left; } .right{ width:400px; background:yellow; float:right; } .center{ background:blue; margin:0 400px 0 300px; } </style> </head> <body> <div class="left">左</div> <div class="right">右</div> <div class="center">中</div> </body> </html>
关于css布局的一些个人理解。(只是自己理解,不对的地方勿喷)
标签:
原文地址:http://www.cnblogs.com/joesbell/p/5004647.html