圣杯布局/双飞翼布局/Flex布局/Grid布局/绝对定位布局实
2018-04-23 本文已影响0人
One_Hund
一、效果：两边固定，中间自适应的三栏布局
两边固定，中间自适应
二、代码
1、圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>圣杯布局</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.container{
padding:0 300px 0 200px;
}
.left,.main,.right{
min-height: 130px;
float: left;
}
.left{
position: relative;
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.main{
background: blue;
width: 100%;
}
.right{
position: relative;
right: -300px;
margin-left:-300px;
background: red;
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
2、双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>双飞翼布局</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.content{
margin:0 300px 0 200px;
}
.left,.main,.right{
min-height: 130px;
float: left;
}
.left{
margin-left: -100%;
background: green;
width: 200px;
}
.main{
background: blue;
width: 100%;
}
.right{
margin-left:-300px;
background: red;
width: 300px;
}
</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>
3、Flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex布局</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.container{
display:flex;
min-height:130px;
}
.left{
order:-1;
flex-basis: 200px;
background-color: green;
}
.main{
flex-grow:1;
background-color: blue;
}
.right{
flex-basis: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4、Grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid布局</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.container{
display:grid;
grid-template-columns: 200px 1fr 300px;
min-height:130px;
}
.left{
grid-column:1/2;
grid-row:1/2;
background: green;
}
.main{
grid-column:2/3;
grid-row:1/2;
background: blue;
}
.right{
grid-column: 3/4;
grid-row:1/2;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
5、绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>绝对定位布局</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.container{
position: relative;
}
.left,.main,.right{
top: 0;
height: 130px;
}
.left{
position: absolute;
left: 0;
background: green;
width: 200px;
}
.main{
background: blue;
margin: 0 300px 0 200px;
}
.right{
position: absolute;
right: 0;
background: red;
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
