三種三欄布局
阿新 • • 發佈：2017-10-02
ack 中間 padding round class str osi img html
三欄布局
1 絕對定位
左右兩側寬度固定,中間內容自適應
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>絕對定位</title> <style> *{ padding:0; margin:0; } .left,.right{ position:absolute; top:0; width:200px; } .left{ left:0; background:pink; } .right{ right:0; background:pink; } .main{ margin:0 200px; background: #0ec6c6; } </style> </head><body> <div class="left"> <p>二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> <div class="main"> <p>二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的...</p> </div> <div class="right"> <p>二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> </body> </html>
2 margin負值
左右兩側寬度固定,中間內容自適應
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>margin負值</title> <style> *{ padding:0; margin:0; } .main{ width:100%; float:left; } .content{ margin:0 200px; background:skyblue; } .left,.right{ width:200px; float:left; background:lightpink; } .left{ margin-left:-100%; /*整個屏幕的100%*/ } .right{ margin-left:-200px; /*200為左右盒子的寬度大小*/ } </style> </head> <body> <div class="main"> <div class="content"> <p>1二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> </div> <div class="left"> <p>二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> <div class="right"> <p>二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> </body> </html>
3 浮動
左右兩側寬度固定,中間內容自適應
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>浮動</title> <style> *{ padding:0; margin:0; } .left,.right{ width:200px; background:deeppink; } .left{ float:left; } .right{ float:right; } .main{ margin:0 200px; background:green; } </style> </head> <body> <div class="left"> <p>二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> <div class="right"> <p>二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> <div class="main"> <p>1二、三種方法 為了演示的需要,首先限定下示例的布局結構:左中右三欄布局, 左右兩欄寬度固定(要想不固定將寬度值改為百分值即可),中間欄寬度自適應。 左右兩欄的... </p> </div> </body> </html>
三種三欄布局