css-聖盃佈局和雙飛翼佈局
阿新 • • 發佈：2019-01-29
1.聖盃佈局：
（1）父元素中包含左中右三個盒子，並且讓他們分別左浮動。
（2）將中間的盒子寬度設為100%，並且它在html中程式碼位置放在左右程式碼位置的上面（就是所說的第一個渲染）。
（3）左右兩邊使用margin-left的負值，使他們與中間的盒子同行，（左邊：-100%，右邊：-右邊盒子的寬度）。
（4）父元素用padding為左右盒子留位置。
（5）用相對定位將左右盒子移到正確的位置上
（6）給父元素清除浮動
程式碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聖盃佈局</title> <style type="text/css"> .main{width: 810px;height: 400px;border: 1px blue solid;padding-top: 25px;padding-left: 10px;padding-right: 10px;} ._center{width: 100%;height: 350px;text-align: center;line-height: 350px;float: left;background-color: #eeeeee} ._left{width: 200px;height: 350px;left: 20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left: -100%;background-color: red;} ._right{width: 200px;height: 350px;right:20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left:-200px;background-color: green;} </style> </head> <body> <div class="main clearfix"> <div class="_center">我是中間</div> <div class="_left">我是左邊</div> <div class="_right">我是右邊</div> </div> </body> </html>
效果圖：
2.雙飛翼佈局：
（1）父元素中包含左中右三個盒子，並且讓他們分別左浮動。
（2）將中間的盒子寬度設為100%，並且它在html中程式碼位置放在左右程式碼位置的上面（就是所說的第一個渲染）。
（3）左右兩邊使用margin-left的負值，使他們與中間的盒子同行，（左邊：-100%，右邊：-右邊盒子的寬度）。
（4）給中間元素設定子元素，並給其左右margin為左右盒子留位置
（6）給父元素清除浮動.
程式碼如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙飛翼佈局</title> <style type="text/css"> .main{width: 800px;height: 400px;padding-top: 25px;margin: 0;} ._center{width: 100%;height: 350px;float: left;background-color: #eeeeee;} ._center>div{margin: 0 200px 0 200px;} ._left{width: 200px;height: 350px;left: 20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left: -100%;background-color: red;} ._right{width: 200px;height: 350px;right:20px;top:25px;text-align: center;line-height: 350px;float: left;margin-left:-200px;background-color: green;} </style> </head> <body> <div class="main clearfix"> <div class="_center"> <div>我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間我是中間</div> </div> <div class="_left">我是左邊</div> <div class="_right">我是右邊</div> </div> </body> </html>
效果如下：
注：為中間元素設定子元素，併為其設定margin,目的是為了中間元素的內容可以在中間顯示，margin的左右值為左右盒子的寬度。