用CSS实现二栏与三栏布局

两栏布局

方法一：BFC构建

两栏布局是主内容区为主，左（右）侧有一栏，代码如下：

    <style>
        #header, #footer{ 
            height: 100px;
            background: red;
         }
        #content .main{
            height: 200px;
            background: green;
            overflow: auto;
        }
        #content .aside{
            height: 200px;
            width: 100px;
            background: blue;
            float: left;
        }
    </style>
   <body>
    <div id="header"></div>
    <div id="content">
        <div class="aside"></div>
        <div class="main">
            main main main main main main
        </div>
    </div>
    <div id="footer"></div>
</body>

要点：将侧边区块<aside>域浮动，<aside>浮动后覆盖绿色<main>, 再将<main> overflow:auto，形成BFC，形成独立区域，达到效果。
这里写图片描述
想详细了解BFC可以看我之前发的全面地理解BFC

方法二：使用负边距

代码例子：

<style type="text/css">
        html,body{
            padding: 0;
            margin: 0;
        }
        #header, #footer{ 
            height: 100px;
            background: red;
            overflow: hidden;
         }
         #main{
            overflow: auto;
         }
        #main .center{
            height: 200px;
            width: 100%;
            float: left;
        }
        .center .content{
            height: 200px;
            background: green;
            margin-right: 100px;
        }
        #main .aside{
            height: 200px;
            width: 100px;
            background: blue;
            float: left;
            margin-left: -100px;
        }
    </style>

 </head>
 <body>
    <div id="header">header</div>
    <div id="main">
        <div class="center">
            <div class="content">
                我是主区块 我是主区块 main main  main
            </div>
        </div>
        <div class="aside"></div>
    </div>
    <div id="footer">footer</div>
 </body>

元素content添加父元素，设置左浮动，宽度为100%；
content 设置右边距，宽度为aside的宽度（留出aside浮上来的空间）；
aside左浮动，并设置负边距，等于自身宽度。

这里写图片描述

三栏布局是在两栏的基础上完成：

content设置左右边距，宽度等于side1宽度，side1左浮动，side1负边距设为-100%。
side2左浮动，设置负边距等于自身宽度值。

再来个三栏demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>flex编码实战</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        .grid-111,.item-555{
            background-color: red;
            height: 100px;
            width: 100%;
        }
        .item-222{
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
        .item-333{
            height: 200px;
            background-color: green;
            overflow: auto;
        }
        .item-444{
            float: right;
            width: 100px;
            height: 200px;
            background-color: blue;
        }
    </style>
 </head>
 <body>
    <div class="grid-111">111</div>
    <div class="grid-222">
        <div class="item-222">222</div>
        <div class="item-444">444</div>
        <div class="item-333">333</div>
    </div>
    <div class="item-555">555</div>
</body>
<script>
</script>
</html>

这里写图片描述

可以看看她写的三栏4种方式布局
三栏布局

用CSS实现二栏与三栏布局

两栏布局

方法一：BFC构建

方法二：使用负边距

猜你喜欢