经典三栏式布局
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像素。
以上是关于经典三栏式布局的主要内容,如果未能解决你的问题,请参考以下文章