【css】三栏,左右两栏固定,中间宽度自适应 ||| 三栏,高度自适应 有图片,高清,无码
2012-08-16 16:53
531 查看
三栏,左右两栏固定,中间宽度自适应
<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路径是否正确)
<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路径是否正确)
相关文章推荐
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- CSS 三分栏_左右两栏宽度固定,中间自适应
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
- CSS 左右固定,中间自适应宽度 及 左右自适应宽度,中间固定
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- CSS布局:三栏布局,中间栏固定宽度,左右两边自适应
- html css实现左右两列固定宽度中间自适应效果
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- CSS_Layout三分栏__左右两栏宽度固定,中间自适应
- CSS_Layout三分栏__左右两栏宽度固定,中间自适应
- CSS三列布局之左右宽度固定,中间元素自适应问题
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- 自适应宽度,左右两栏固定宽度,中间栏优先加载
- css实现高度或者宽度不固定的div元素垂直左右居中
- (div+css)上下固定中间自适应高度网页布局的实现
- CSS三栏布局(两边固定中间自适应宽度)的方法
- 三列布局(左右宽度固定,中间自适应)的五种解决方案
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
- 网页图片变形解决方法-固定宽度高度按比例自动缩小CSS