用CSS实现布局（两栏布局，多栏布局）

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

a伊雪

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

阅读量6k

点赞数 1

分类专栏： css/html

css/html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在网页上的布局比较经典的是两栏布局和三栏布局。

两栏布局

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

         <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，形成独立区域，达到效果。

方法二：使用负边距

代码例子：

<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>