重溫聖盃佈局和雙飛翼佈局
阿新 • • 發佈:2019-02-06
1.聖盃佈局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
*{margin: 0;padding: 0;}
.all{height: 300px; background: pink; padding:0 200px;min-width:600px;}/*---大盒子用padding撐開兩邊的的位置---*/
.all .center{width: 100%; height:300px; background: orange ; float: left;}
/*---左右兩邊的關鍵先是通過margin,讓左右兩個盒子回到正常軌道,然後就是給了相對定位,再通過left移回正確位置---*/
.all .left{width: 200px;height: 300px;background: green; float: left; margin-left: -100%; position: relative; left:-200px;}
.all .right{width: 200px;height: 300px;background: skyblue; float: right;margin-left: -200px;position: relative ; left:200px;}
</style>
</head>
<body>
<div class="all">
<div class="center">這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間這個是中間</div>
<div class="left">這個是左邊</div>
<div class="right">這個是右邊</div>
</div>
</body>
</html>
2.雙飛翼佈局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
*{margin: 0;padding: 0;}
.all{height: 300px; background: pink;}
.all .center{width: 100%; height: 300px; background: yellowgreen; float: left;}
/*---中間盒子一開始充滿整一行,然後再通過兩邊盒子處理佈局位置,最後給中間盒子抱一個div,用margin撐開兩邊的內容---*/
.all .left{width: 200px;height: 300px; background: skyblue;float: left; margin-left: -100%;}
.all .right{width: 200px;height: 300px; background: orange; float: right; margin-left: -200px;}
.all .center div{margin:0 200px;}
</style>
</head>
<body>
<div class="all">
<div class="center">
<div>你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多你是我的小蘋果,怎麼愛你都不嫌多</div>
</div>
<div class="left">左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊左邊</div>
<div class="right">右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊右邊</div>
</div>
</body>
</html>
最近發現聖盃跟雙飛翼佈局裡面的內容用英文或者數字來填充的話,佈局是會崩的,解決方法是英文或數字要有空格,不知道是不是佔位符的問題。