
有几种解决方案呢?
1. float方案
<style>
.layout_float .left-right-center .left {
float: left;
width: 300px;
height: 500px;
background-color: aqua;
}
.layout_float .left-right-center .right {
float: right;
width: 300px;
height: 500px;
background-color: red;
}
.layout_float .left-right-center .center {
height: 500px;
background-color: blue;
}
.layout_float .left-right .left {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
.layout_float .left-right .right {
background-color: yellow;
height: 300px;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>
浮动解决方案:三栏布局
</h1>
</div>
</article>
实现原理:
左右栏分别浮动在窗口两边,且已经脱离文档流,中间块(处于文档流中)受左右浮动影响被卡在中间无法继续向左右伸展已达到自适应。
缺点:
- dom元素需要遵循,左-右-中的书写顺序,否则会出现中间内容铺满整行,右边元素下沉的情况。
- 当中间高度超出的情况会出现中间区域溢出。
优化方案:
清除浮动或创建BFC
<style>
.layout_float .left-right-center .left {
float: left;
width: 300px;
height: 300px;
background-color: aqua;
}
.layout_float .left-right-center .right {
float: right;
width: 300px;
height: 300px;
background-color: red;
}
.layout_float .left-right-center .center {
margin-left: 300px;
margin-right: 300px;
background-color: blue;
}
.layout_float .left-right .left {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
.layout_float .left-right .right {
background-color: yellow;
height: 300px;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>
浮动解决方案:三栏布局
</h1>
</div>
</article>
2. 绝对定位方案
<style>
.layout_absolute .left-right-center>div{
position: absolute;
height: 300px;
}
.layout_absolute .left {
left:0;
background-color: aqua;
width: 300px;
}
.layout_absolute .right {
right:0;
width: 300px;
background-color: red;
}
.layout_absolute .center {
left:300px;
right: 300px;
background-color: blue;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>
绝对定位解决方案
</h1>
</div>
</article>
实现原理:
使元素脱离文档流,进行绝对定位。
缺点:
由于容器脱离了文档流,导致子元素也必须脱离文档流
3. flex布局方案
在 Flexbox 模型中,有三个核心概念:
– flex,需要布局的元素
– flex容器
– 排列方向(direction),决定了 flex 项的布局方向

<style>
.layout_flexbox {
margin-top: 20px;
}
.layout_flexbox * {
height: 300px;
}
.layout_flexbox .left-right-center {
display: flex;
flex-direction: row;
}
.layout_flexbox .left {
width: 300px;
background-color: red;
}
.layout_flexbox .right {
width: 300px;
background-color: blue;
}
.layout_flexbox .center {
flex: 1;
background-color: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>
flex解决方案
</h1>
</div>
<div class="right"></div>
</article>
缺点:
浏览器兼容性不太好,em...
4. table布局
<style>
.left-right-center {
display: table;
width: 100%;
}
.left-right-center > div {
display: table-cell;
}
.left {
width: 300px;
background-color: yellow;
}
..center {
background-color: blue;
}
.right {
width: 300px;
background-color: red;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
<h1>
table布局解决方案
</h1>
</div>
<div class="right"></div>
</article>
优点:
兼容性很好,设置简单
缺点:
- 无法设置栏边距,左中右模块间无间隔
- 对SEO不够友好
- 当一个格高度增加,其余的格也会被动增加高度
5. 网格布局
先了解下网格布局的基本定义吧!
Grid Container
:设置了 display: gird 的元素。 是所有grid item的直接父项。
重要属性:
-
display
将元素定义为 grid contaienr,并为其内容建立新的网格格式化上
下文。 -
grid-template-columns / grid-template-rows
:使用多个值来定义网格的列和行。这些值表示每个网格的大小
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
Grid Item
:Grid 容器的孩子(直接子元素)。
解决方案:
<style>
.layout_grid {
display: grid;
width: 100%;
grid-template-rows: 300px;
grid-template-columns: 200px auto 200px;
}
.left {
background-color: red;
}
.main {
margin: 0 20px;
background-color: green;
}
.right {
background-color: blue;
}
</style>
<article class=" layout_grid">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</article>
网友评论