背景
在笔试题中,会经常遇到实现一个三栏布局,下面用代码实现一个中间部分要自适应宽度并且优先加载,左边宽100px;右边栏宽160px的三栏布局
float布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三栏布局--float形式</title>
</head>
<style>
.box{
float: left;
width: 100%;
}
.middle{
height: 100px;
background-color: #f00;
margin: 0 160px 0 100px;
}
.left{
float: left;
width: 100px;
height: 100px;
margin-left: -100%;
background-color: #ff0;
}
.right{
float: left;
width: 160px;
height: 100px;
margin-left: -160px;
background-color: #00f;
}
</style>
<body>
<div class="box">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三栏布局--flex形式</title>
</head>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
width: 100%;
}
.middle2{
order: 2;
flex: 1;
height: 100px;
background-color: #f00;
}
.left2{
order: 1;
width: 100px;
height: 100px;
background-color: #ff0;
}
.right2{
order: 3;
width: 160px;
height: 100px;
background-color: #00f;
}
</style>
<body>
<ul>
<li class="middle2"></li>
<li class="left2"></li>
<li class="right2"></li>
</ul>
</body>
</html>
gird布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三栏布局--gird形式</title>
</head>
<style>
.gird{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px auto 160px;
}
.middle3{
order: 2;
background-color: #f00;
}
.left3{
order: 1;
background-color: #ff0;
}
.right3{
order: 3;
background-color: #00f;
}
</style>
<body>
<div class="gird">
<div class="middle3"></div>
<div class="left3"></div>
<div class="right3"></div>
</div>
</body>
</html>