CSS 三列布局（两边固定宽度，中间自适应）

最新推荐文章于 2022-05-17 16:36:47 发布

guoxiaxing

最新推荐文章于 2022-05-17 16:36:47 发布

阅读量739

点赞数

分类专栏： HTML+CSS 文章标签：三列布局

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/80031393

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.position + margin：

缺点：当浏览器的窗口过小时，可能会出现多层重叠现象。

HTML结构：

</div>

注意：中间的div放在最后！！！

CSS样式：

.left,.right{
position: absolute;
height: 500px;
width: 200px;
}
.left{
left:0;
background-color: red;
}
.right{
right: 0;
background-color: green;
}
.main{
margin: 0 200px;
background-color: pink;
height: 500px;

}

2.float + margin：

缺点：当浏览器窗口缩小时，会导致元素放不下而换行。

HTML结构：

</div>

注意：中间的div放在最后！！！

CSS样式：

.clear:after{
content: '';
display: block;
clear:both;
}
.left{
float:left;
width:200px;
height: 500px;
background-color: red;
}
.right{
float:right;
width:200px;
height: 500px;
background-color: green;
}
.main{
height: 500px;
margin: 0 200px;
background-color: pink;

}

3.flex布局：

HTML结构：

</div>

CSS样式：

.contain{
display: flex;
height: 500px;
}
.left{
width:200px;
background-color: red;
}
.right{
width: 200px;
background-color: green;
}
.main{
flex: 1;
background-color: pink;

}

4.table布局：

HTML结构：

</div>

CSS样式：

.contain{
display: table;
width:100%;
height: 500px;
}
.contain>div{
display: table-cell;
}
.left{
width: 200px;
background-color: red;
}
.right{
width: 200px;
background-color: green;
}
.main{
background-color: pink;

}

5.grid网格布局：(注意兼容性)

HTML结构：

</div>

CSS样式：

.contain{
display: grid;
width: 100%;
grid-template-rows:100px;
grid-template-columns:200px auto 200px;
}
.left{
background-color: red;
}
.right{
background-color: green;
}
.main{
background-color: pink;
}