利用CSS的浮动和定位进行三列布局

最新推荐文章于 2024-09-10 14:15:01 发布

龙之华2

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量604

点赞数

分类专栏： HTML中利用CSS浮动和定位实现三列自适应布局文章标签： html css

本文链接：https://blog.csdn.net/weixin_46394746/article/details/117590542

版权

HTML中利用CSS浮动和定位实现三列自适应布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

要求：实现三列布局，左右两列固定宽度，中间宽度自适应
一、利用CSS浮动（float）实现
原理：将左右两列分别设置为左浮动和右浮动，然后再将中间列插入（提醒：中间列的div必须放在最后）
先看浏览器效果：
在这里插入图片描述
代码：

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS自适应布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
       /*设置左右两列div高宽度*/
        .right,.left{
        width:200px;
        height:200px;
        }
        /*设置div内容居中*/
        div{
            text-align: center;
        }
        /*设置右列右浮动*/
        .right{
            float: right;
            background-color: blue;
        }
        /*设置左列左浮动*/
        .left{
            float: left;
            background-color: blueviolet;
        }
        /*设置中间列*/
        .center{
            height: 200px;
            background-color: red;
        }
    </style>
    
</head>
<body>
    <div class="right">第一个元素的内容</div>
    <div class="left">第二个元素内容</div>
    <div class="center">第三个元素的内容</div><!--中间列必须放在最后-->
</body>
</html>

二、利用CSS绝对定位实现
原理：将左右两列设置绝对定位为最左和最右，再插入中间列（一样中间列放在最后）
先看浏览器效果：
在这里插入图片描述
代码：

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS自适应布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
       /*设置左右两列div高宽度*/
        .right,.left{
        width:200px;
        height:200px;
        }
        /*设置div内容居中*/
        div{
            text-align: center;
        }
        
        /*设置右列绝对位置*/
        .right{
            position: absolute;
            left: 0px;
            background-color: blue;
        }
        /*设置左列绝对位置*/
        .left{
            position: absolute;
            right: 0px;
            background-color: blueviolet;
        }
        /*设置中间列*/
        .center{
            margin: 0px 200px;/*将左右两列的宽度留出，避免覆盖*/
            height: 200px;
            background-color: red;
        }
    </style>
    
</head>
<body>
    <div class="right">第一个元素的内容</div>
    <div class="left">第二个元素内容</div>
    <div class="center">第三个元素的内容</div><!--中间列必须放在最后-->
</body>
</html>