两栏布局的几种实现方式

最新推荐文章于 2024-09-30 08:45:00 发布

非星

最新推荐文章于 2024-09-30 08:45:00 发布

阅读量2.5k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_33680352/article/details/110739525

版权

两栏布局的几种实现方式

通过以下四常见的方法均可以实现图中两栏布局的效果

侧边栏左浮动+正文部分overflow：auto
定位实现两栏布局
纯浮动形式
浮动+常规流

效果图

在这里插入图片描述

侧边栏左浮动+正文部分overflow：auto

代码部分

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width:900px;
            margin:0 auto;
        }
        .left{
            width: 200px;
            height: 500px;
            background: #ccffff;
            float: left;
        }
        .right{
            height: 500px;
            overflow: auto;
            background: #ffcccc;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <aside class="left"></aside>
        <div class="right">
            这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！
        </div>
    </div>
</body>
</html>

定位实现两栏布局

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width:900px;
            margin:0 auto;
            position: relative;
        }
        .left{
            width:200px;
            height:500px;
            background: #ccffff;
            position: absolute;
            top:0;
            left:0;
        }
        .right{
            width:700px;
            height:500px;
            background: #ffcccc;
            position: absolute;
            top:0;
            right:0;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <aside class="left"></aside>
        <div class="right">
            这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！
        </div>
    </div>
</body>
</html>

纯浮动形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width:900px;
            margin:0 auto;
            overflow: hidden;
        }
        .left{
            width:200px;
            height:500px;
            background: #ccffff;
            float: left;
        }
        .right{
            width:700px;
            height:500px;
            background: #ffcccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <aside class="left"></aside>
        <div class="right">
            这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！
        </div>
    </div>
</body>
</html>

浮动+常规流

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            margin:0 auto;
            width:80%;
        }
        .left{
            width:200px;
            height:500px;
            background: #ccffff;
            float: left;
        }
        .right{
            height: 500px;
            background: #ffcccc;
            margin-left:200px;

    </style>
</head>
<body>
    <div class="wrap">
        <aside class="left"></aside>
        <div class="right">
            这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！这里是正文！
        </div>
    </div>
</body>
</html>