共计 1737 个字符,预计需要花费 5 分钟才能阅读完成。
// 第一种办法:浮动(块级格局独占一行)
<div class="wrapper_float">
<div class="float_left">1</div>
<div class="float_center">2</div>
<div class="float_right">3</div>
</div>
<style>
.wrapper_float{
height:100px;
width:100%;
}
.wrapper_float .float_left{
width:300px;
float:left;
background: red;
height:100%;
}
.wrapper_float .float_center{
width:300px;
float:right;
background: blue;
height:100%;
}
.wrapper_float .float_right{
background: beige;
height:100%;
}
</style>
// 第二种办法:相对定位
<div class="wrapper_absolute">
<div class="absolute_left">1</div>
<div class="absolute_center">2</div>
<div class="absolute_right">3</div>
</div>
<style>
.wrapper_absolute{
height:100px;
position:relative;
}
.absolute_left{
position:absolute;
left:0;
width:300px;
}
.absolute_right{
position:absolute;
right:0;
width:300px;
}
.absolute_center{
position:absolute;
left:300px;
right:300px;
}
</style>
// 第三种办法:flex 布局
<div class="wrapper_flex">
<div class="flex_left">1</div>
<div class="flex_center">2</div>
<div class="flex_right">3</div>
</div>
<style>
.wrapper_flex{
display:flex;
height:100px;
}
.flex_left, .flex_right{width:300px}
.flex_center{flex:1}
</style>
// 第四种办法:table
<div class="wrapper_table">
<div class="table_left">1</div>
<div class="table_center">2</div>
<div class="table_right">3</div>
</div>
<style>
.wrapper_table{
display: table;
height:100px;
width:100%;
}
.table_left,.table_right{
width:300px;
display: table-cell;
background-color: aliceblue;
}
.table_center{display: table-cell;}
</style>
// 第五种办法:grid
<div class="wrapper_grid">
<div class="grid_left">1</div>
<div class="grid_center">2</div>
<div class="grid_right">3</div>
</div>
<style>
.wrapper_grid{
display:grid;
width:100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
</style>
优缺点:
浮动:兼容性好,易脱离文本流
相对定位:快捷,有效性差
flex 布局:解决上述两个问题
table 表格布局:兼容性好,单个模块高度增高的时候,其余模块的高度也随着增高
网格布局:缩小代码量
高度不固定时,flex 布局,table 布局仍然能够实现
正文完