场景

场景: 假设高度已知, 请写出三栏布局, 其中左、右栏宽度各为 300 px, 中间自适应。本文针对这种场景罗列出以下几种方案。

float 布局

<body>
<style>
.left {
float: left;
background: red;
width: 300px;
}
.middle {
background: purple;
}
.right {
float: right;
background: green;
width: 300px;
}
</style>
<div class="left">float layout</div>
<div class="right">float layout</div>
<div class="middle">float layout</div>
</body>

float 布局要注意 class="middle" 这行书写的位置

position 布局

<body>
<style>
.left {
background: red;
position: absolute;
left: 0;
width: 300px;
}
.middle {
position: absolute;
left: 300px;
right: 300px;
background: purple;
}
.right {
background: green;
position: absolute;
right: 0;
width: 300px;
}
</style>
<div class="left">position layout</div>
<div class="middle">position layout</div>
<div class="right">position layout</div>
</body>

flex 布局

<style>
.flexbox {
display: flex;
}
.left {
background: red;
width: 300px;
}
.middle {
flex: 1;
background: purple;
}
.right {
background: green;
width: 300px;
}
</style>
<section class="flexbox">
<div class="left">flex layout</div>
<div class="middle">flex layout</div>
<div class="right">flex layout</div>
</section>

flex 布局是兼容性较好的布局

grid 布局

<body>
<style>
.gridbox {
display: grid;
grid-template-columns: 300px auto 300px;
}
.left {
background: red;
}
.middle {
background: purple;
}
.right {
background: green;
}
</style>
<section class="gridbox">
<div class="left">grid layout</div>
<div class="middle">grid layout</div>
<div class="right">grid layout</div>
</section>
</body>

使用 grid 目前记住 columns-template-rowscolumns-template-columns

table 布局

<body>
<style>
.tablebox {
display: table;
width: 100%;
}
.left {
display: table-cell;
background: red;
width: 300px;
}
.middle {
display: table-cell;
background: purple;
}
.right {
display: table-cell;
background: green;
width: 300px;
}
</style>
<section class="tablebox">
<div class="left">table layout</div>
<div class="middle">table layout</div>
<div class="right">table layout</div>
</section>
</body>

table 布局也是和 flex 布局一样兼容性较高的方案

其它解决方案

针对两边宽度固定, 中间宽度自适应还有以下两种方案:

圣杯布局

核心思想: 将内容两边宽度提前空出来, 然后将块级元素进行移动填补

<body>
<style>
.bd {
padding: 0 200px 0 200px;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
<div class="bd">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>

双飞翼布局

核心思想: 将内容宽度占满父容器, 然后将块级元素进行移动覆盖

<body>
<style>
.main {
float: left;
width: 100%;
height: 200px;
background-color: #ddd;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #da4242;
/* 产生布局效果的属性 */
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #4ddef1;
/* 产生布局效果的属性 */
margin-left: -200px;
}
</style>
<div class="main"></div>
<div class="left">left</div>
<div class="right">right</div>
</body>