三栏布局也叫双飞翼布局
-
三列布局,中间宽度自适应,两边定宽;
-
中间栏要在浏览器中优先展示渲染;
-
允许任意列的高度最高;
- 主要有margin-left = 100% 可以是其上移一行,,利用了box-sizing = padding + margin + border + cotnent
- 其实left和right在container的padding上,, margin-left = 100%相对于父类的宽度去移动,,为神马会移上去,,想不通
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>布局,圣杯模式</title> <style> * { margin: 0; padding: 0; } #header,#footer{ background-color: green; text-align: center; } #container{ /* width: 100%; */ padding: 0 150px 0 200px; height: 500px; background-color:gold; } .column{ float: left; height: 100%; position: relative; } #center{ width: 100%; background-color: hotpink; } #right{ left: 150px; width:150px; background-color: blue; margin-left: -150px; } #left{ left: -200px; width:200px; background-color: royalblue; margin-left: -100%; } </style> </head> <body> <div id="header">header</div> <div id="container"> <div id="center" class="column">center</div> <div id="left" class="column">left</div> <div id="right" class="column">right</div> </div> <div id="footer">footer</div> </body> </html>
方式二,,双飞翼的实现方式
- 去掉了 position的定位,left right ,,以及 container的中间padding值,,变成main中子元素的margin上留出空白
- 多用了一个div
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>双飞翼</title> <style> *{ margin: 0; padding: 0; } body{min-width: 700px;} #header,#footer{ background-color: green; text-align: center; } #container{ height: 500px; background-color:gold; } .column{ float: left; height: 100%; } #center{ width: 100%; background-color: hotpink; } #right{ width:150px; background-color: blue; margin-left: -150px; } #left{ /* left: -200px; */ width:200px; background-color: royalblue; margin-left: -100%; } .sub{ margin: 0 150px 0 200px; } </style> </head> <body> <div id="header">header</div> <div id="container"> <div id="center" class="column"><div class="sub">center</div></div> <div id="left" class="column">left</div> <div id="right" class="column">right</div> </div> <div id="footer">footer</div> </body> </html>
flex布局
绝对定位也可以实现,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局,绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
body{min-width: 700px;}
#header,#footer{
background-color: green;
text-align: center;
}
#container{
/* width: 100%; */
height: 500px;
background-color:gold;
position: relative;
}
.column{
position: absolute;
height: 100%;
top: 0;
}
#center{
margin:0 150px 0 200px;
/* width: 100%; */
background-color: hotpink;
height: 100%;
}
#right{
right: 0;
width:150px;
background-color: blue;
}
#left{
left: 0;
width:200px;
background-color: royalblue;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="container">
<div id="center" class="">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>