经典三栏式布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了经典三栏式布局相关的知识,希望对你有一定的参考价值。

html部分:

<body>
        <div id=‘main‘><div id=‘middle‘></div></div>
    <div id=‘left‘></div>
    <div id=‘right‘></div>

</body>   

css部分:



<style type=‘text/css‘>
html,body{
                  margin:0;
                  height:100%;
            }
 #main{
                  height:100%;
                  width:100%;
                  background:red;
                  float:left;
            }
#middle{
                    height:100%;
                    margin:0 210px;
                }

#left,#right{    float:left;
                    height:100%;
                    width:200px;
                    background-color:green;
     }
#left{
                margin-left:-100%;
        }
#right{
                margin-left:-200px;
    }   
</style>          

 



 

首先,中间的主体要使用双层标签。外层div宽度100%显示,并且浮动(本例左浮动,下面所述依次为基础),内层div为真正的主体内容,含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200像素。

以上是关于经典三栏式布局的主要内容,如果未能解决你的问题,请参考以下文章

三栏布局 两栏布局

三种方法实现三栏式布局

实现三栏布局的六种方式

小程序: 三栏布局的五种实现方式及优缺点

谁能详细说说wordpress主题的 一栏 两栏 三栏 是表达啥 有啥区别 有没典型例子?

css布局--圣杯布局和双飞翼布局