三栏布局，左右栏宽为300px，中间自适应

2019-12-21 分类：CSS 作者：管理员阅读（535）

1. flexbox 弹性伸缩盒子
2. table 表格布局
3. absolute 绝对定位
4. grid网格布局
5. float 浮动布局

<!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>三栏布局左右宽度300px,中间宽度自适应</title>
</head>
<style>
*{margin: 0;padding: 0;}
/* flex */
.flex-container{
height: 100px;
background-color: bisque;
display: flex;
}
.flex-left,.flex-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;
}
.flex-middle{
flex: 1;
background-color: #e77f67;
}
/* table */
.table-container{
width: 100%;
height: 100px;
background-color: bisque;
display: table;
}
.table-left,.table-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;
display: table-cell;
}
.table-middle{
width: 100%;
height: 100px;
background-color: #e77f67;
}
/* float */
.float-container{
width: 100%;
height: 100px;
background-color: bisque;
}
.float-left,.float-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;

}
.float-right{
float: right;
}
.float-left{
float: left;
}
.float-middle{
height: 100px;
background-color: #e77f67;
}
/* position */
.position-container{
width: 100%;
height: 100px;
background-color: bisque;
position: relative;
}
.position-left,.position-right{
width: 300px;
height: 100px;
background-color: #0fb9b1;
position: absolute;
}
.position-left{
left: 0;
}
.position-right{
right: 0;
}
.position-middle{
height: 100px;
position: absolute;
left: 300px;
right: 300px;
background-color: #e77f67;
}
/* 第五种 grid */
.grid-container{
height: 100px;
background-color: bisque;
display: grid;
grid-template-columns: 300px auto 300px;
}
.grid-left,.grid-right{
background-color: #0fb9b1;
}
.grid-middle{
background-color: #e77f67;
}
</style>
<body>

<div class="flex-container">
<div class="flex-left"></div>
<div class="flex-middle">第一种 flex</div>
<div class="flex-right"></div>
</div>

<div class="table-container">
<div class="table-left"></div>
<div class="table-middle">第二种 table</div>
<div class="table-right"></div>
</div>

<div class="float-container">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="float-middle">第三种 float</div>
</div>

<div class="position-container">
<div class="position-left"></div>
<div class="position-middle">第四种 position</div>
<div class="position-right"></div>
</div>

<div class="grid-container">
<div class="grid-left"></div>
<div class="grid-middle">第五种 grid</div>
<div class="grid-right"></div>
</div>
</body>
</html>

111

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(1) 打赏