慕課筆記利用css進行布局【兩列布局】
阿新 • • 發佈:2017-07-29
知識 cnblogs center ack 右浮動 com title logs float
<html> <head> <title>兩列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*兩列的布局樣式*/ /*float:left向左浮動*/ .content{width:920px;margin:0 auto} .left{width:20%;height:500px;background:#f00;float:left} .right{width:80%;height:500px;background:#ff0;float:right} </style> </head> <body> <!--/*兩列的布局樣式*/--> 兩列的布局樣式,采用浮動的方式<br/> <div class="content"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
效果圖如下:
關鍵知識點:
float:left向左浮動
float:right向右浮動
慕課筆記利用css進行布局【兩列布局】