两栏布局的几种实现方式

最新推荐文章于 2024-02-01 16:12:44 发布

非星

最新推荐文章于 2024-02-01 16:12:44 发布

阅读量2.4k

点赞数

文章标签： 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>

非星

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
两栏布局的几种实现方式

两栏布局的几种实现方式通过以下四常见的方法均可以实现图中两栏布局的效果侧边栏左浮动+正文部分overflow：auto定位实现两栏布局纯浮动形式浮动+常规流效果图侧边栏左浮动+正文部分overflow：auto代码部分<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫