CSS三列布局总结

最新推荐文章于 2024-06-27 23:28:24 发布

Carol小朋友

最新推荐文章于 2024-06-27 23:28:24 发布

阅读量191

点赞数

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

本文链接：https://blog.csdn.net/lixinyi0622/article/details/84981402

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

三列布局就是左右两栏定宽且不一定相等，中间一栏自适应。

假设我们要实现一个左边固定200px，右边固定300px，中间自适应的布局。
有以下几种方法：

1.圣杯布局

这种方式的DOM顺序一定要是middle在前，然后是left和right。
HTML代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="3columns.css"/>
</head>
<body>
<div class="container">
    <div class="middle">
        <p>middle</p>
    </div>
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>
</body>
</html>

CSS代码如下：

html,body{
    padding:0;
    margin:0;
}
.container{
    padding-left:200px;
    padding-right:300px;
}
.left{
    float:left;
    margin-left:-100%; 
    position:relative;
    left:-200px;
    width:200px;
    height:300px;
    background-color: red;
}
.right{
    float:left;
    margin-left:-300px;
    position:relative;
    right:-300px;
    width:300px;
    height:350px;
    background-color: blue;
}
.middle{
    float:left;
    height:400px;
    width:100%;
    background-color: yellow;
}

在这里插入图片描述

2.双飞翼布局

需要给中间部分加一个父容器
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="3columns.css"/>
</head>
<body>
<div class="container">
    <div class="middle-box">
        <div class="middle">
            <p>middle</p>
        </div>
    </div>
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>
</body>
</html>

CSS代码：

html,body{
     padding:0;
     margin:0;
 }
.left{
    float:left;
    margin-left:-100%;
    width:200px;
    height:300px;
    background-color: red;
}
.right{
    float:left;
    margin-left:-300px;
    width:300px;
    height:350px;
    background-color: blue;
}
.middle-box{
    float:left;
    height:400px;
    background-color: yellow;
    width:100%;
}
.middle{
    margin-left:200px;
    margin-right:300px;
}

在这里插入图片描述

3.弹性布局

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="2columns.css"/>
</head>
<body>
<div class="container">
    <div class="middle">
        <p>middle</p>
    </div>
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>
</body>
</html>

CSS代码：

html,body{
     padding:0;
     margin:0;
 }
.container{
    display:flex;
}
.left{
    order:1;
    flex-basis:200px;
    height:300px;
    background-color: red;
}
.middle{
    order:2;
    flex:1;
    height:400px;
    background-color: yellow;
}
.right{
    order:3;
    flex-basis:300px;
    height:350px;
    background-color: blue;
}

在这里插入图片描述

4.绝对布局

HTML中DOM顺序随意
CSS代码：

html,body{
     padding:0;
     margin:0;
 }
.container{
    position:relative;
}
.left{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:300px;
    background-color: red;
}
.middle{
    margin-left:200px;
    margin-right: 300px;
    height:400px;
    background-color: yellow;
}
.right{
    position:absolute;
    top:0;
    right:0;
    width:300px;
    height:350px;
    background-color: blue;
}

在这里插入图片描述