首页 > 代码库 > (5)经典三栏式布局

(5)经典三栏式布局

2024-09-15 06:37:22   216人阅读

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像素。


(5)经典三栏式布局






























        

            
                
                  
                
                

                    联系

                    我们