常见五种布局方式:
float
浮动布局absolute
绝对定位flex
弹性盒子table
表格布局grid
网格布局 / 栅格化布局
五种布局方式基本实现方式
下面通过三栏式布局,已知高度,左右栏固定300px宽度,中间自适应为例,简单讲解五种布局。
- 公共样式如下:
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 100px;
}
</style>
1.float
浮动布局
<section class="layout float">
<style media="screen">
.layout.float .left{
float:left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center"<