CSS三栏布局问题

最新推荐文章于 2022-05-19 21:14:32 发布

野生松

最新推荐文章于 2022-05-19 21:14:32 发布

阅读量264

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/qq_38211541/article/details/105981742

版权

Css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

纪录多种实现CSS三栏布局的方法

圣杯布局

左右两侧浮动，中间元素使用margin

<div class="container">
    <div class="left">Left</div>
     <!-- 右栏部分要写在中间内容之前。因为如果右侧元素在中间元素后面，由于浮动元素位置上不能高于（或平级）前面的非浮动元素，导致右侧元素会下沉。 -->
    <div class="right">Right</div>
    <div class="main">Main</div>
</div>

<style>
body,html,.containerl{
    height: 100%;
    padding:0;
    margin: 0;
}
/*左边栏左浮动*/
.left{
    float:left;
    height:100%;
    width:200px;
    background:#333;
}
/*中间栏自适应*/
.main{
    height:100%;
    margin:0 200px;
    background: red;
}
/*右边栏右浮动*/
.right{
    float:right;
    height:100%;
    width:200px;
    background:#333;
}
</style>
// 优点：快捷 简单 兼容性较好
// 缺点: 有局限性 脱离文档流 需要清除浮动等

父容器使用margin，左中右元素均浮动，利用定位和margin移动到正确位置。

<style>
    .w {
        /* margin-left对应左边元素l的宽度，margin-right对应右边元素r的宽度 */
        margin-left: 400px;
        margin-right: 400px;
    }
    .left, .center, .right {
        height: 600px;
        float: left;
    }
    .left {
        width: 400px;
        background-color: aqua;
        position: relative;
        /* 为了让l元素从当前行移动到第一行同一位置*/
        margin-left: -100%;
        /* 移动到中间元素左侧正确位置 */
        left: -400px; 
    }
    .center {
        width: 100%;
        background-color: blueviolet;
    }
    .right {
        width: 400px;
        background-color: brown;
        position: relative;
        /* 为了让l元素从当前行移动到上一行*/
        margin-left: -400px;
        right: -400px;
    }
</style>
<body>
    <div class="w">
        <div class="center">自适应</div>
        <div class="left">定宽</div>
        <div class="right">定宽</div>
    </div>
</body>

双飞翼布局

两侧宽度固定，中间宽度自适应的三列布局（中间元素内部增加子元素用于放置内容）

<style>
    .left, .center, .right {
        height: 600px;
        float: left;
    }
    .left {
        width: 400px;
        background-color: aqua;
        /* 为了让l元素从当前行移动到第一行同一位置*/
        margin-left: -100%;
    }
    .center {
        width: 100%;
        background-color: blue;
    }
    .i {
        height: 600px;
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .right {
        width: 400px;
        background-color: brown;
         /* 为了让r元素移动到第一行*/
        margin-left: -400px;
    }
</style>
<body>
    <div class="center">
        <div class="i">自适应</div>
    </div>
    <div class="left">定宽</div>
    <div class="right">定宽</div>
</body>

flex（弹性盒子布局）

<div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</div>

<style>
 body,html{
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.container{
    display: flex;
}
.left{
    width:200px;
    background: red;
}
.main{
    flex: 1;
    background: blue;
}
.right{
    width:200px;
    background: red;
}
</style>
// 优点：比较完美 移动端首选
// 缺点: 不兼容 ie9 及以下

Grid(网格布局)

<div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</div>

<style>
 body,html{
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.container{
    display: grid;
    width: 100%;
    grid-template-rows: 100px;  /*设置行高*/
    grid-template-columns: 200px auto 200px;  /*设置列数属性*/
}
.left{
    background: red;
}
.main{
    background: blue;
}
.right{
    background:red;
}
</style>
// 优点：简单强大 解决二维布局问题
// 缺点: 不兼容 ie9 及以下