三栏式布局

三栏式布局

两中方式:

  1.利用定位的方法做左右两栏

<style type="text/css">  
.wrap{width:90%; background-color:#ccc; margin:0 auto; position:relative;}  
.left{width:200px; background-color:blue; height:300px; position:absolute; left:0; top:0;}  
.right{width:250px; background-color:green;height:300px; position:absolute; right:0; top:0;}  
.main{background-color:red; color:#fff;height:300px; margin:0 250px 0 200px;}  
</style>  
</head>  
<body>  
<div class="wrap">  
    <div class="left"></div>  
    <div class="main"></div>  
    <div class="right"></div>  
</div>  
</body>  

 2.利用左右浮动的方式做左右两栏

<style type="text/css">
.wrap{width:90%; background-color:#ccc; margin:0 auto; overflow:hidden;} 
.left{width:200px; background-color:blue; height:300px; float:left; margin-left:-100%;}
.right{width:250px; background-color:green;height:300px; float:left; margin-left:-250px;}
.main{width:100%;background-color:red; color:#fff;height:300px; float:left;}
.main>div{margin:0 250px 0 200px;}
</style>
</head>
<body>
<div class="wrap">
	<div class="main"><div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div>
	<div class="left"></div>
    <div class="right"></div>
</div>
</body>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页