三种三栏布局<---->三种两栏布局百度总结

最新推荐文章于 2023-02-02 19:09:05 发布

aoje86881

最新推荐文章于 2023-02-02 19:09:05 发布

阅读量143

点赞数

原文链接：http://www.cnblogs.com/Tiboo/p/7620163.html

版权

三栏布局

效果——〉 左右两侧宽度固定,中间内容自适应

1 绝对定位

<!DOCTYPE html>
<html>
    <head>
    <meta  charset="utf-8" />
    <title>绝对定位</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .left,.right{
            position:absolute;
            top:0;
            width:200px;
        }
        .left{
            left:0;
            background:pink;
        }
        .right{
            right:0;
            background:pink;
        }
        .main{
            margin:0 200px;
            background: #0ec6c6;
        }
    </style>
    </head>
    <body>
        <div class="left">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
        <div class="main">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
        <div class="right">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
    </body>
</html>

2 margin负值

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>margin负值</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .main{
            width:100%;
            float:left;
        }
        .content{
            margin:0 200px;
            background:skyblue;
        }
        .left,.right{
            width:200px;
            float:left;
            background:lightpink;
        }
        .left{
            margin-left:-100%;   /*整个屏幕的100%*/
        }
        .right{
            margin-left:-200px; /*200为左右盒子的宽度大小*/
        }
    </style>
    </head>
    <body>
        <div class="main">
            <div class="content">
                <p>1二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                    左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                    左右两栏的...
                </p>
            </div>
        </div>
        <div class="left">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
        <div class="right">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
    </body>
</html>

3 浮动

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>浮动</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .left,.right{
            width:200px;
            background:deeppink;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .main{
            margin:0 200px;
            background:green;
        }
    </style>
    </head>
    <body>
        <div class="left">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
        <div class="right">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
        <div class="main">
            <p>1二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
    </body>
</html>

两栏布局

效果——〉左侧固定宽度，右侧自适应大小

1 浮动

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>浮动</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .left{
            width: 200px;
            background: deepskyblue;
            float:left;
        }
        .right{
            margin-left: 210px;
            background:lightpink;
        }
    </style>
    </head>
    <body>
        <div class="left">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
        <div class="right">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
    </body>
</html>

2 BFC（块级格式化上下文）

利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>浮动</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .left{
            width: 200px;
            background: #ccc;
            float: left;
        }
        .right{
            overflow:hidden;
            background: #eee;
        }
    </style>
    </head>
    <body>
        <div class="left">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
        <div class="right">
            <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
    </body>
</html>

3 margin负值

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>负边距</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .right{
            float:right;
            width:100%;
            margin-left:-210px;
        }
        .content{
            margin-left:210px;
        }
        .left{
            float:left;
            width:200px;
        }
    </style>
    </head>
    <body>
        <div class="right">
            <div class="content">
                <p>二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                    左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                    左右两栏的...
                </p>
            </div>
        </div>
        <div class="left">
            <p>1二、三种方法 为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,
                左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。
                左右两栏的...
            </p>
        </div>
    </body>
</html>

转载于:https://www.cnblogs.com/Tiboo/p/7620163.html

aoje86881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三种三栏布局<---->三种两栏布局百度总结

三栏布局效果——〉左右两侧宽度固定,中间内容自适应 1绝对定位<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>绝对定位</title> <style>...
复制链接

扫一扫