使用CSS实现三列布局

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

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)有父元素

这里写图片描述

发布了260 篇原创文章 · 获赞 194 · 访问量 39万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览