浮动布局
<!-- 浮动布局 -->
<section class="layout float">
<style>
.layout.float .left {
width: 100px;
float: left;
background: red;
}
.layout.float .right {
width: 100px;
float: right;
background: blue;
}
.layout.float .center {
background: yellow;
}
</style>
<article class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="center">
<h2>浮动布局</h2>
浮动布局浮动布局 浮动布局浮动布局
浮动布局浮动布局 浮动布局浮动布局
浮动布局浮动布局 浮动布局浮动布局
</div>
</article>
</section>
缺点: 需要清除浮动.
优点: 兼容性好
注: center 盒子必须放在最后
绝对定位布局
<!-- 绝对定位布局 -->
<section class="layout absolute">
<style>
.layout.absolute .left {
position: absolute;
left: 0;
width: 100px;
background: red;
}
.layout.absolute .right {
width: 100px;
right: 0;
position: absolute;
background: blue;
}
.layout.absolute .center {
position: absolute;
left: 100px;
right: 100px;
background: yellow;
}
</style>
<article class="container">
<div class="left">左边</div>
<div class="center">
<h2>绝对定位布局</h2>
绝对定位布局 绝对定位布局
绝对定位布局 绝对定位布局
绝对定位布局 绝对定位布局
绝对定位布局 绝对定位布局
</div>
<div class="right">右边</div>
</article>
</section>
注: 这种办法会让整个布局脱离文档流.
flexbox布局
<!-- flexbox布局 -->
<section class="layout flexbox">
<style>
.layout.flexbox .container {
display: flex;
}
.layout.flexbox .left {
width: 100px;
background: red;
}
.layout.flexbox .right {
width: 100px;
background: blue;
}
.layout.flexbox .center {
flex: 1;
background: yellow;
}
</style>
<article class="container">
<div class="left">左边</div>
<div class="center">
<h2>flexbox布局</h2>
flexbox布局 flexbox布局
flexbox布局 flexbox布局
flexbox布局 flexbox布局
flexbox布局 flexbox布局
</div>
<div class="right">右边</div>
</article>
</section>
缺点: 兼容性问题
优点: 解决以上两种布局存在的问题
注:目前比较主流的移动端布局方式
表格布局
<!-- 表格布局 -->
<section class="layout table">
<style>
.layout.table .container {
display: table;
width: 100%;
height: 100px;
}
.layout.table .container>div {
display: table-cell;
}
.layout.table .left {
width: 100px;
background: red;
}
.layout.table .right {
width: 100px;
background: blue;
}
.layout.table .center {
background: yellow;
}
</style>
<article class="container">
<div class="left">左边</div>
<div class="center">
<h2>表格布局</h2>
表格布局表格布局表格布局
表格布局表格布局表格布局
表格布局表格布局表格布局
</div>
<div class="right">右边</div>
</article>
</section>
注:该方式在实际项目开发中已经淘汰.
网格布局
<!-- 网格布局 -->
<section class="layout grid">
<style>
.layout.grid .container {
display: grid;
width: 100%;
/* 设置高度 */
grid-template-rows: 100px;
/* 设置行数 */
grid-template-columns: 100px auto 100px;
}
.layout.grid .left {
background: red;
}
.layout.grid .right {
background: blue;
}
.layout.grid .center {
background: yellow;
}
</style>
<article class="container">
<div class="left">左边</div>
<div class="center">
<h2>网格布局</h2>
网格布局网格布局网格布局
网格布局网格布局网格布局
网格布局网格布局网格布局
网格布局网格布局网格布局
</div>
<div class="right">右边</div>
</article>
</section>
注:黑科技
