【css】三栏，左右两栏固定，中间宽度自适应 ||| 三栏，高度自适应 有图片，高清，无码

三栏，左右两栏固定，中间宽度自适应

<style type="text/css">
.left{width:300px;float:left;background:#0046a3;height:1000px;border:0;_margin-right:-3px;}
.right{margin:0;width:300px;float:right;background:#0046a3;height:1000px;border:0;_margin-left:-3px;}
.middle{width:auto;background:#f00;height:1000px;border:0;}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>

 

 

 

 

三栏，高度自适应

 

 

 

<style type="text/css">
.left{width:300px;float:left;background:#0046a3;}
.right{margin:0;width:300px;float:left;background:#0046a3;}
.middle{background:#f00;border:0;float:left;}
.main div{width:33%;padding-bottom:10000px;margin-bottom:-10000px;}
.main{overflow:hidden;width:970px;}
</style>
<div class="main">
    <div class="left">left</div>
    <div class="middle"><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p></div>
    <div class="right">right</div>
</div>

 

 

 

 示例下载地址（如果运行有问题，请查看CSS路径是否正确）