【css】三栏,左右两栏固定,中间宽度自适应 ||| 三栏,高度自适应 有图片,高清,无码
2012-08-16 16:53 sniper007 阅读(312) 评论(0) 编辑 收藏 举报三栏,左右两栏固定,中间宽度自适应
<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>
.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>
.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路径是否正确)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步