CSS中间自适应的三栏布局

最新推荐文章于 2022-09-22 13:40:16 发布

心刻

最新推荐文章于 2022-09-22 13:40:16 发布

阅读量135

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44679078/article/details/115503483

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方式1：流体布局

html代码

 <div class="left"></div>
 <div class="right"></div>
 <div class="main"></div>

css代码

.left {
    float: left;
    width: 200px;
    height: 400px;
    background: skyblue;
}
.right {
    float: right;
    width: 100px;
    height: 400px;
    background: orange;
}
.main {
    height: 400px;
    margin-left: 210px;
    margin-right: 110px;
    background: pink;
}

结果
在这里插入图片描述

方式2：圣杯布局

html代码

 <div class="container">
     <div class="main"></div>
     <div class="left"></div>
     <div class="right"></div>
</div>

css代码

.container {
    margin-left: 210px;
    margin-right: 110px;
}
.main {
    float: left;
    width: 100%;
    height: 400px;
    background: pink;
}
.left {
    float: left;
    position: relative;
    left: -210px;
    width: 200px;
    height: 400px;
    margin-left: -100%;
    background: skyblue;
}
.right {
    float: right;
    position: relative;
    right: -110px;
    width: 100px;
    height: 400px;
    margin-left: -100px;
    background: orange;
}

结果
在这里插入图片描述

方法3：双飞翼布局

html代码

<div class="container">
     <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

css代码

.container {
    float: left;
    width: 100%;
}
.main {
    // float: left;
    height: 400px;
    margin-left: 210px;
    margin-right: 110px;
    background: pink;
}
.main::after {
    content: '';
    display: block;
    clear: both;
    zoom: 1;
}
.left {
    float: left;
    width: 200px;
    height: 400px;
    margin-left: -100%;
    background: skyblue;
}
.right {
    float: right;
    width: 100px;
    height: 400px;
    margin-left: -100px;
    background: orange;
}