三栏式布局
两中方式：
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>
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
