CSS_Layout三分栏__左右两栏宽度固定,中间自适应
2015-05-11 11:22
357 查看
CSS:
html:
效果如图:
三栏float left left right
中间栏宽度100%,设置左margin为-200
中间栏内部margin:0 200
并且去浮动。
body{ min-width:800px; } h1, h2, div p{ margin:0; padding:10px; } /*#wrapper{*/ /*width:90%;*/ /*margin:0 auto;*/ /*background:#ddd;*/ /*}*/ #content{ background:#ff6; } #left, #right{ width:200px; float:left; background:#fc0; } #middle{ float:left; width:100%; margin:0 -200px; } #middle .inner{ margin:0 200px; background:#ccc; } #right{ float:right; } #footer{ clear:both; } /* Clearfix */ .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-table;} /* Hides from IE-mac /*/ * html .clearfix{height:1%;} .clearfix{display:block;} /* End hide from IE-mac */ *+html .clearfix{min-height:1%;}/* IE7 */
html:
<div id="wrapper"> <div id="content" class="clearfix"> <div id="left"> <h2>Left</h2> <p>左边栏宽度固定为200px</p> </div> <div id="middle"> <div class="inner"> <h2>Middle</h2> <p>中间栏宽度可以自适应</p> <p><b>原理:</b>利用margin的负值错别固定的宽度</p> </div> </div> <div id="right"> <h2>Right</h2> <p>右边栏宽度固定为200px</p> </div> </div> <div id="footer"> <h1>Footer</h1> </div> </div>
效果如图:
三栏float left left right
中间栏宽度100%,设置左margin为-200
中间栏内部margin:0 200
并且去浮动。
相关文章推荐
- CSS_Layout三分栏__左右两栏宽度固定,中间自适应
- CSS 三分栏_左右两栏宽度固定,中间自适应
- html css实现左右两列固定宽度中间自适应效果
- CSS三列布局之左右宽度固定,中间元素自适应问题
- CSS布局:三栏布局,中间栏固定宽度,左右两边自适应
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- CSS 左右固定,中间自适应宽度 及 左右自适应宽度,中间固定
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
- 【css】三栏,左右两栏固定,中间宽度自适应 ||| 三栏,高度自适应 有图片,高清,无码
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- DIV+CSS经典??三列布局(左右固定 中间自适应)
- CSS之中间固定两边自适应宽度
- 左右两列固定宽度,中间自适应布局
- 三列,左右两列宽度固定,中间宽度自适应
- [CSS布局]3列布局:左右两列固定宽度、中间列自适应满宽
- css中间固定宽度,两边自适应宽度
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
- css 两边宽度固定中间自适应宽度
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼