使用CSS实现三列布局

最新推荐文章于 2024-02-05 14:39:35 发布

IvyYin

最新推荐文章于 2024-02-05 14:39:35 发布

阅读量4.7k

点赞数 4

分类专栏： HTML/CSS/JS 文章标签： css html 布局

本文链接：https://blog.csdn.net/sinat_20177327/article/details/76037456

版权

HTML/CSS/JS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

三列布局也是一种常用的布局方式，使用较多的三列布局有固定宽度三列布局和左右宽度固定、中间自适应宽度的三列布局。

1、固定宽度三列布局

固定宽度的三列布局可以使用浮动实现。需要三个div包围在一个父级div中，并且将左边和中间两个子div设置为左浮动，将右边的子div设置为右浮动。

HTML代码：

<!--三列布局：固定宽度-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="div0">
        <div class="left">
            left
        </div>
        <div class="middle">
            middle
        </div>
        <div class="right">
            right
        </div>
    </div>
</body>
</html>

main.css 表现如下：

*{
    padding: 0;
    margin: 0;
}
.div0{
    width: 800px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    margin: 50px auto;
    border: 2px solid #E51414;/*添加边框只为结果更直观*/
}
.left{
    width: 200px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #6E6C8A;
    float: left;/*设为左浮动*/
    text-align: center;
}
.middle{
    width: 430px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #806155;
    float: left;/*设为左浮动*/
    margin: 0 10px 0 10px;/*左右各加10px使得三列之间有间隙*/
    text-align: center;
}
.right{
    width: 150px;
    height: 500px;/*设置高度只为结果更直观，高度可根据内容自适应*/
    background: #8F9068;
    float: right;/*设为右浮动*/
    text-align: center;
}

结果如下：
这里写图片描述

2、左右固定宽度、中间自适应宽度的三列布局

HTML代码：

<!--三列布局：左右固定宽度，中间自适应宽度-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>三列布局</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <!--<div class="div0">-->
        <div class="left">
            left
        </div>
        <div class="middle">
            middle
        </div>
        <div class="right">
            right
        </div>
    <!--</div>-->
</body>
</html>

当左右两个div宽度固定，中间的div宽度未知时，使用浮动不能实现三列布局。使用绝对定位才能实现三列布局：需要将左边和右边的元素设置为绝对定位，将中间的元素margin值的左右分别设置为右边元素和左边元素的宽度。不需要父元素的包裹，即可实现三列布局，如果有父元素，需要将父元素设置为相对定位。CSS表现如下：

*{
    padding: 0;
    margin: 0;
}
/*.div0{
    width: 800px;
    height: 500px;
    margin: 50px auto;
    position: relative;
    border: 2px solid #E51414;
}可以不要这个父元素div0（即默认父元素为body），如果有，需将这个父元素设置为相对定位*/
.left{
    width: 200px;
    height: 500px;
    background: #6E6C8A;
    position: absolute;
    top: 0;
    left: 0;/*设为绝对定位并且与其父元素的top、left距离都为0*/
    text-align: center;
}
.middle{
    height: 500px;
    background: #806155;
    margin: 0 160px 0 210px;/*左右各加10px使得三列之间有间隙*/
    text-align: center;
}
.right{
    width: 150px;
    height: 500px;
    background: #8F9068;
    position: absolute;
    top: 0;
    right: 0;/*设为绝对定位并且与其父元素的top、right距离都为0*/
    text-align: center;
}

结果如下：
（1）没有父元素（即父元素为body）：

这里写图片描述

（2）有父元素

这里写图片描述

IvyYin

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
使用CSS实现三列布局

三列布局也是一种常用的布局方式，使用较多的三列布局有固定宽度三列布局和左右宽度固定、中间自适应宽度的三列布局。1、固定宽度三列布局固定宽度的三列布局可以使用浮动实现。需要三个div包围在一个父级div中，并且将左边和中间两个子div设置为左浮动，将右边的子div设置为右浮动。HTML代码：<!DOCTYPE html><html lang="en"><head
复制链接

扫一扫