純css實現三欄式佈局

原創

2020-02-21 12:45

1.相對定位+float+margin負值（聖盃佈局）

<div id="parent_rela">
    <h3>使用relative:relative定位（聖盃佈局）</h3>  
    <div id="center_rela">我是中間</div>
    <div id = "left_rela">我是左邊</div>  
    <div id = "right_rela">我是右邊</div>           
</div>

#parent_rela{padding: 0 210px;overflow: hidden;}
#left_rela,#right_rela{width: 200px;height: 100px; background-color: #ffe6b8;position: relative;float: left;}
#left_rela{margin-left: -100%;left: -210px;}
#right_rela{margin-left: -200px;right: -210px;}  
#center_rela{width: 100%;background-color: #eee;height: 100px;float: left;}

先給外層padding留出兩側的空間

2.絕對定位

<div id="parent_abso">
    <h3>使用position:absolute定位</h3>  
    <div id = "left">我是左邊</div>  
    <div id = "right">我是右邊</div>  
    <div id = "center">我是中間</div>           
</div>

#parent_abso{position: relative;}
#left,#right{width: 200px;height: 100px; background-color: #ffe6b8;position: absolute;top:100px;}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:0 210px ;background-color: #eee;height: 100px; }

3.自身浮動定位法

<h3>使用自身浮動定位法</h3>  
<div id = "left_self">我是左邊</div>  
<div id = "right_self">我是右邊</div>  
<div id = "center_self">我是中間</div>

#left_self,#right_self{ width: 200px;height: 100px; background-color: #ffe6b8 }  
#left_self {float: left;}  
#right_self{float: right;}  
#center_self{margin: 0 210px;height: 100px; background-color: #a0b3d6}

4.flex佈局

<h3>使用flex佈局（兼容性不是很好）</h3>
<div id="parent">
    <div id="center_flex">我是中間</div>
    <div id="left_flex">我是左邊</div>
    <div id="right_flex">我是右邊</div>
</div>

#left_flex,#right_flex{ width: 200px;height: 100px;background-color: darkorange }  
#right_flex{background-color: lightpink;order: 2;}
#parent{display: flex;}
#center_flex{flex: 1;order:1;margin: 0 10px;background-color: #ffe6b8;}

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0

5.margin負值法（雙飛翼佈局）

<h3>使用margin負值法進行佈局（雙飛翼佈局）</h3>  
<div id = "wrap">  
    <div id = "center">我是中間</div>  
</div>  
<div id = "left_margin">我是左邊</div>  
<div id = "right_margin">我是右邊</div>

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;}