浮動(dòng)布局
<!-- 浮動(dòng)布局 -->
<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>浮動(dòng)布局</h2>
浮動(dòng)布局浮動(dòng)布局 浮動(dòng)布局浮動(dòng)布局
浮動(dòng)布局浮動(dòng)布局 浮動(dòng)布局浮動(dòng)布局
浮動(dòng)布局浮動(dòng)布局 浮動(dòng)布局浮動(dòng)布局
</div>
</article>
</section>
缺點(diǎn): 需要清除浮動(dòng).
優(yōu)點(diǎn): 兼容性好
注: center 盒子必須放在最后
絕對(duì)定位布局
<!-- 絕對(duì)定位布局 -->
<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>絕對(duì)定位布局</h2>
絕對(duì)定位布局 絕對(duì)定位布局
絕對(duì)定位布局 絕對(duì)定位布局
絕對(duì)定位布局 絕對(duì)定位布局
絕對(duì)定位布局 絕對(duì)定位布局
</div>
<div class="right">右邊</div>
</article>
</section>
注: 這種辦法會(huì)讓整個(gè)布局脫離文檔流.
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>
缺點(diǎn): 兼容性問題
優(yōu)點(diǎn): 解決以上兩種布局存在的問題
注:目前比較主流的移動(dòng)端布局方式
表格布局
<!-- 表格布局 -->
<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>
注:該方式在實(shí)際項(xiàng)目開發(fā)中已經(jīng)淘汰.
網(wǎng)格布局
<!-- 網(wǎng)格布局 -->
<section class="layout grid">
<style>
.layout.grid .container {
display: grid;
width: 100%;
/* 設(shè)置高度 */
grid-template-rows: 100px;
/* 設(shè)置行數(shù) */
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>網(wǎng)格布局</h2>
網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
網(wǎng)格布局網(wǎng)格布局網(wǎng)格布局
</div>
<div class="right">右邊</div>
</article>
</section>
注:黑科技
