聖盃佈局、雙飛翼佈局、Flex佈局和絕對定位佈局實例

時間 2019-12-14

標籤佈局雙飛 flex 絕對定位實例欄目 Flex 简体版

原文原文鏈接

轉自CSDN博客html

前提：瀏覽器

針對以下DOM結構，編寫CSS，實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度爲200px，right寬度爲300px，main處在中間，寬度自適應。佈局

<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>flex

聖盃佈局與雙飛翼佈局針對的都是三列左右欄固定中間欄邊框自適應的網頁佈局（想象一下聖盃是主體是加上兩個耳朵；鳥兒是身體加上一對翅膀），聖盃佈局是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師（傳說是玉伯）改進並傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：spa

三列布局，中間寬度自適應，兩邊定寬；orm
中間欄要在瀏覽器中優先展現渲染；htm
容許任意列的高度最高博客

方法一：聖盃佈局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>it

<style>io

.container {
padding: 0 200px 0 200px;
}
.left, .main, .right{
position: relative;
min-height: 200px;
float: left;
color: white;
}
.left{
background: green;
left: -200px;/*把left移動到留白處*/
width: 200px;
margin-left: -100%;
/* 設置left部分的margin-left爲-100%,就會使left向左移動一整個行的寬度，因爲left左邊是父元素的邊框，因此left繼續跳到上一行左移，一直移動到上一行的開頭，並覆蓋了main部分*/
}
.main{
background: blue;
width: 100%;
}
.right{
background: red;
width: 200px;
margin-left: -200px;
right: -200px; /*把right移動到留白處*/
}

</style>
</head>
<body>

<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

</body>
</html>

方法二：雙飛翼佈局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>

<style>

.left, .main, .right {
float: left;
min-height: 200px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 200px;
}

.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 300px 0 200px;
}

</style>
</head>
<body>

<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

</body>
</html>

方法三：Flex佈局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>

<style>

.left, .main, .right {
float: left;
min-height: 200px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 200px;
}

.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 300px 0 200px;
}

</style>
</head>
<body>

<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

</body>
</html>

方法四：絕對定位佈局

絕對定位，就至關於萬金油同樣的存在，不論什麼樣的佈局，使用絕對定位都能實現

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>

<style>

.container{
position: relative;
}
.main,.right,.left{
top: 0;
height: 130px;
}
.main{
margin: 0 300px 0 200px;
background-color: blue;
}
.right{
position: absolute;
width: 300px;
right: 0;
background-color: red;
}
.left{
position: absolute;
width: 200px;
background-color: green;
left: 0;
}
</style>
</head>
<body>