面：請用至少三種方式實現三欄佈局.
我：好.
方式一：float方式
<html>
<head>
<meta charset="UTF-8">
<title>左右固定，中間自適應</title>
<style>
.txtCenter{
text-align: center;
line-height: 200px;
font-size:20px;
color:#fff;
}
.parentDiv{
height:200px;
}
.leftDiv{
float:left;
width:200px;
height:200px;
background-color: #5A6A94;
}
.rightDiv{
float:right;
width:200px;
height:200px;
background-color: #EA6F5A;
}
.centerDiv{
height:200px;
margin-left:210px;
margin-right:210px;
background-color: #FFD5B1;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="leftDiv txtCenter">Left</div>
<div class="rightDiv txtCenter">Right</div>
<div class="centerDiv txtCenter">Center</div>
</div>
</body>
</html>
方式二：聖盃佈局
<html>
<head>
<meta charset="UTF-8">
<title>左右固定，中間自適應</title>
<style>
.txtCenter{
text-align: center;
line-height: 200px;
font-size:20px;
color:#fff;
}
.parentDiv{
padding-left:210px;
padding-right:210px;
height:200px;
}
.leftDiv{
float: left;
margin-left:-100%;
position: relative;
left:-210px;
width:200px;
height:200px;
background-color: #5A6A94;
}
.rightDiv{
float: left;
margin-left:-200px;
position: relative;
right:-210px;
width: 200px;
height: 200px;
background-color: #EA6F5A;
}
.centerDiv{
float:left;
width:100%;
height:200px;
background-color: #FFD5B1;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="centerDiv txtCenter">Center</div>
<div class="leftDiv txtCenter">Left</div>
<div class="rightDiv txtCenter">Right</div>
</div>
</body>
</html>
方式三：flex方式
<html>
<head>
<meta charset="UTF-8">
<title>左右固定，中間自適應</title>
<style>
.txtCenter{
text-align: center;
line-height: 200px;
font-size:20px;
color:#fff;
}
.parentDiv{
display: flex;
flex-direction: row;
}
.leftDiv{
width:200px;
height: 200px;
order: -1;
margin-right: 10px;
flex: 0 1 200px;
background-color: #5A6A94;
}
.rightDiv{
height: 200px;
margin-left: 10px;
flex: 0 1 200px;
background-color: #EA6F5A;
}
.centerDiv{
height: 200px;
background-color: #FFD5B1;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="centerDiv txtCenter">Center</div>
<div class="leftDiv txtCenter">Left</div>
<div class="rightDiv txtCenter">Right</div>
</div>
</body>
</html>
面：你還能想到其它的實現方式嗎？
我：是的.
面：請口述一下.
我：雙飛翼佈局,絕對定位佈局.
面：能說下聖盃佈局和雙飛翼佈局的區別嗎？
我：中間主體內容的處理方式不同.
面：怎麼不同？
我：額 我還是寫一下吧
面：可以.
方式四：雙飛翼佈局
<html>
<head>
<meta charset="UTF-8">
<title>左右固定，中間自適應</title>
<style>
.txtCenter{
text-align: center;
line-height: 200px;
font-size:20px;
color:#fff;
}
.parentDiv{
float: left;
width: 100%;
}
.leftDiv{
float: left;
margin-left: -100%;
width:200px;
height: 200px;
background-color: #5A6A94;
}
.rightDiv{
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: #EA6F5A;
}
.centerDiv{
margin-left: 210px;
margin-right: 210px;
height: 200px;
background-color: #FFD5B1;
}
</style>
</head>
<body>
<div style="overflow:hidden;">
<div class="parentDiv">
<div class="centerDiv txtCenter">Center</div>
</div>
<div class="leftDiv txtCenter">Left</div>
<div class="rightDiv txtCenter">Right</div>
</div>
</body>
</html>
面：你怎麼在外層寫了一個Div並且寫了overflow了呢？
我：爲了不影響其它因素.
面：寫清除浮動不行嗎！爲什麼要這樣寫？
我：額 也可以的,我自己喜歡這麼幹，自己設置了float,影響了別人,還要讓別人擦屁股？.
面：額 我們繼續下一題.
我：好.