实现两栏布局的方法

最新推荐文章于 2022-05-04 08:45:38 发布

lpl_L

最新推荐文章于 2022-05-04 08:45:38 发布

阅读量196

点赞数 1

本文链接：https://blog.csdn.net/lpl_L/article/details/108268430

版权

两栏布局

方法一：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>

要点：
将侧边区块域浮动，侧边块浮动后覆盖绿色区域块, 再将绿色区域块overflow:auto，形成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左浮动，并设置负边距，等于自身宽度。
效果：
在这里插入图片描述

lpl_L

关注

1
点赞
踩
0

收藏

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

两栏布局方法一：BFC构建两栏布局是主内容区为主，左（右）侧有一栏：代码： <style> #header, #footer{ height: 100px; background: red; } #content .main{ height: 200px; background: green; overflow:
复制链接

扫一扫