重溫聖盃佈局和雙飛翼佈局
阿新 • • 發佈：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 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>最近發現聖盃跟雙飛翼佈局裡面的內容用英文或者數字來填充的話，佈局是會崩的，解決方法是英文或數字要有空格，不知道是不是佔位符的問題。