三栏布局方式两边固定中间自适应的4种方法
2021-12-10 本文已影响0人
小呆糊总
1.浮动法：左栏左浮动，右栏右浮动，中间栏用margin，
布局div是left、right、main即左右中或者右左中，布局中main必须在最后，否则右侧布局会掉下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.left{
height:200px;
width: 200px;
background: chocolate;
/* 方法一浮动 */
float: left;
}
.main{
height:200px;
background: darkblue;
/* 方法一浮动 */
margin: 0 200px;
}
.right{
width: 200px;
height:200px;
background: crimson;
/* 方法一浮动 */
float: right;
}
</style>
<body>
<!-- 布局中main必须在最后 -->
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
</html>
下面的顺序将会导致右侧的移动到下一列
谷歌浏览器出现了问题：右侧掉了下来
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
image.png
2.绝对定位法：左侧固定于左上，右侧固定于右上，中间用margin撑开，
布局div是left、right、main或left、main、right或者main、left、right均可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.left{
height:200px;
width: 200px;
background: chocolate;
/* 方法二绝对定位 */
position:absolute;
top:0;
left:0;
}
.main{
height:200px;
background: darkblue;
/* 方法二绝对定位 */
margin: 0 200px;
}
.right{
width: 200px;
height:200px;
background: crimson;
/* 方法二绝对定位 */
position:absolute;
top:0;
right:0;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
</html>
3.flex布局：增加父级div.设置为display:flex,中间设置flex:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
/* 方法三 flex布局*/
.flexDiv{
display: flex;
}
.left{
height:200px;
width: 200px;
background: chocolate;
}
.main{
height:200px;
background: darkblue;
/* 方法三 flex布局*/
flex: 1;
}
.right{
width: 200px;
height:200px;
background: crimson;
}
</style>
<body>
<div class="flexDiv">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
4.margin负值法：全部左浮动，中间栏宽度100%,并增加一个子元素，子元素设置margin：0 200px空出左右两元素的宽度。左右两栏用负的margin值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.left{
height:200px;
width: 200px;
background: chocolate;
/* 方法四margin赋值 */
float: left;
margin-left: -100%;
}
.main{
/* 方法四margin赋值 */
width: 100%;
float: left;
}
/* 方法四margin赋值 */
.content{
margin:0 200px;
height:200px;
background: darkblue;
}
.right{
width: 200px;
height:200px;
background: crimson;
/* 方法四margin赋值 */
float: left;
margin-left: -200px;
}
</style>
<body>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
正确的效果如下图
image.png
