css佈局雙飛翼佈局聖盃佈局flex，float
雙飛翼佈局 （三列布局，高度鋪滿，兩邊定寬，中間自適應）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雙飛翼佈局 （三列布局，兩邊定寬，中間自適應）</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
.main {
width: 100%;
height: 100%;
float: left;
}
.main .in {
margin: 0 110px;
background-color: pink;
height: 100%;
}
.left,
.right {
height: 100%;
width: 100px;
float: left;
background-color: lightgreen;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -100px;
}
</style>
</head>
<body>
<div class="main">
<div class="in"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
三欄等高佈局 (高度不定，但是等高)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三欄等高佈局 (高度不定，但是等高)</title>
<style>
body {
margin: 0;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.list {
overflow: hidden;
width: 100%;
height: 100%;
}
.main {
margin: 0 110px;
background-color: lightgreen;
}
.left {
width: 100px;
float: left;
background-color: pink;
}
.right {
width: 100px;
float: right;
background-color: pink;
}
.main,
.left,
.right {
margin-bottom: -9999px;
padding-bottom: 9999px;
}
</style>
</head>
<body>
<ul class="list">
<li class="left">左側文字比較少</li>
<li class="right">
右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多右側文字比較多
</li>
<li class="main">中間文字比較少</li>
</ul>
</body>
</html>
聖盃佈局flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聖盃佈局flex</title>
</head>
<style type="text/css">
.header,
.footer {
border: 1px solid #333;
background: #ccc;
text-align: center;
}
.container {
display: flex;
}
.left {
width: 200px;
background: red;
}
.middle {
flex: 1;
background: blue;
}
.right {
width: 220px;
background: green;
}
</style>
<body>
<div class="header">
header
</div>
<div class="container">
<div class="left">
<h4>left</h4>
<p>left-content</p>
</div>
<div class="middle">
<h4>middle</h4>
<p>middle-content</p>
</div>
<div class="right">
<h4>right</h4>
<p>right-content</p>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
聖盃佈局float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聖盃佈局float</title>
</head>
<style type="text/css">
body {
min-width: 550px;
}
* {
margin: 0;
padding: 0;
}
.header,
.footer {
background: gray;
width: 100%;
}
.footer {
clear: both;
}
.main {
height: 200px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}
.left,
.center,
.right {
float: left;
}
.center {
width: 100%;
height: 200px;
background: red;
}
.left {
width: 200px;
height: 200px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 150px;
height: 200px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}
</style>
<body>
<div class="header">
頭部
</div>
<div class="main">
<div class="center">中間中間中間中間中間中間中間後</div>
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
<div class="footer">
底部
</div>
</body>
</html>