如图所示,三栏布局中,左右固定宽度,中间自适应有很多总解决方法,之前也看过一篇文章In Search of the Holy Grail ,不过,就我个人而言,跟喜欢通过margin的负值来达到这种效果。
核心CSS代码:
- #content{background:#ff6;}
- #left,#right{width:200px;background:#fc0;float:left;}
- #middle{float:left; width:100%;margin:0 -200px;}
- #middle .inner{margin:0 200px;background:#ccc;}
- #right{float:right;}
DOM 结构:
- <div id="content" class="clearfix">
- <div id="left">
- </div>
- <div id="middle">
- </div>
- <div id="right">
- </div>
- </div>
点击查看示例
Copyright playgoogle.com© 2008
继续阅读《三栏布局,左右固定宽度,中间自适应的一种解决方案》的全文内容...
相关文章:
最新评论:
-
2009-8-28 10:9:29,mj623ok : 我有些不明白,请教一下。
设置#middle{float:left; width:100%;}我知道肯定会让#middle层下移,因为宽度是以父层的宽度来计算的。可是为什么加上margin:0 -200px;后,这个div就不会下移呢?麻烦博主给我解释一下,谢谢了
-
2009-8-21 14:18:48,DanielChow : 博客非常不错!写东西很实在,完全没有虚夸浮躁之风很佩服!
//有的页面右边的divSidebar,高度溢出了。
分享到:
相关推荐
三栏布局“左右宽度固定,中间自适应宽度” 方法1、设置浮动,使文档脱离文档流,注意层的顺序 方法2、同样通过负边距来实现,缺点是需要另外增加一个层 方法3、也可以通过绝对定位来实现
使用css实现的三列布局,中间一列宽度固定大小,两边宽度要自适应。
主要介绍了详解左右宽度固定中间自适应html布局解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
一个三栏宽度自适应的实例。有两边栏宽度固定,中间宽度自适应和中间栏宽度固定,两边栏宽度自适应两种。
三栏布局,中间自适应宽度,三栏自适应高度的布局
7三列_左右固定_中间自适应布局.rar
下面和大家一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用
今天写一个供给大家参考学习,希望大家可以在这个基础上衍生一些其他的,比如三栏布局的那种:左右固定,中间自适应的效果等等 使用方法: 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
Android支持多屏幕机制即用为当前设备屏幕提供一种合适的方式来共同管理并解析应用资源。本文就介绍了4中Android屏幕自适应解决方案。 一、细说layout_weight 目前最为推荐的Android多屏幕自适应解决方案。 该...
div+css模板布局 右侧固定,左侧自适应
三栏布局自适应wordpress主题是一款简洁白色风格的wordpress主题下载。。
CSS三列布局走出HTML布局阴影,两端固定宽度,中间自适应结构,下面有个不错的示例,大家可以参考下
div宽度自适应布局(左边自适应)
所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。 1...
div宽度自适应布局(右边自适应)
PC、移动端自适应等比缩放布局方案
DIV三列布局,宽度自适应(且最小宽度500px)