转 这几天用div+css写网站，样子 上中下，中间是个左中右3列，可这3列不是等高偏巧有不同颜色的背景，结果就是ie、firefox...这些浏览器无一例外的现实的效果都是长短不齐，如何让这3列可以自适应高度？ 调试了半天，搜索了一番，终于找到解决办法了，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比...
长话短说，用 DIV + CSS 做液态布局（宽度自适应），具体用到“负值外补丁”的方法 （negative margins）。 下面我们来做一个三栏液态布局（three-column liquid layout） 首先 Body 和 外框 的代码： body{margin:0;padding:0px;text-align:center;} #wrap{margin:0 auto;text-align:left;} 三栏的代码分别如下： /*左边栏，固定宽度*/ .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150p...
相信很多人都非常喜欢用div+css布局,无论你是前端开发者，还是后台程序员，因为它的好处实在太多，可以用很少的代码来控制布局，然后用CSS表现其形态，表现和样式分离。而且在SEO方面，它还能提供30%的优化，我们何乐而不为呢。 很多人都会碰到如题的布局问题，解决方案很多，可以用背景图来填充，或用js来控制，但终不是最佳方案，最好还是从DIV,CSS本身来考虑: 以下为三行两列的的经典模式，还可以演变成多种布局，有待大家修...
自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，由于事先不知道具体高度，只能根据内容的增减自适应高度，很多情况下要求两列（或三列）Div的高度相同，以前用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。一般的做法，大都采用背景图填充或 JS 脚本控制的方法使各Div高度相同，这里看到一个解决方法，记录如下： 它主要是采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合方式，示例代码如下： ...
注：转自zctya's blog 在用CSS+DIV的布局中，经常会发现，当一个DIV float之后，如果他的高度超过了其父DIV的高度时，其父DIV的高度并不会相应的进行调整。要解决这个问题（也叫做闭合(清除)浮动），我们有四种办法： 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需 要额外的（而且通常是无语义的）标签...
Header 分析： 最外层的wrapper把所有内容都嵌套在里边，整体相对定位。max min已经很好的控制了最窄最宽值，但对IE没有作用。如果没有其他布局的穿插，这一层其实写在body内就可以，少一层嵌套。 #wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;} wrapper 下级的 outer ...
长话短说，用 DIV + CSS 做液态布局（宽度自适应），具体用到“负值外补丁”的方法 （negative margins）。下面我们来做一个三栏液态布局（three-column liquid layout）首先 Body 和 外框 的代码： body{margin:0;padding:0px;text-align:center;} #wrap{margin:0 auto;text-align:left;} 三栏的代码分别如下： /*左边栏，固定宽度*/ .wrap_l{float:left;background:#FF0000;margin-right:-150px;width:1...
整体效果图： 话不多说，大家自己看，相信会有帮助 < div class ="cBody" > < div class ="Top_Bg" > 黑色背景部分宽度为1002px;加上两边红色的1px边框宽度，整个宽度是1004px </ div > </ div > < div class ="cBody" > < div class ="BabyContent" > < div class ="Babyleft" > < div class ="lefttop" ></ div > < div class ="leftbg" > ...
顶部 边栏 内容 css .header{border-bottom:1px solid #ccc;margin-bottom:5px;}.MainContainer{min-width: 960px;max-width: 1600px;}.sidebar{width:180px;float:left;margin-right: -175px;border-right:1px solid #ccc;min-height:500px;padding:5px;}.main{float:left;margin-left: 1...
div+css 左右两列高度自适应以及父级div也跟着自适应子级的高度 代码如下： 左右两列高度自适应以及父级div也跟着自适应子级的高度 #container { width:216px; height:auto;overflow: hidden; } #container div { float: left; width:8px; margin-bottom: -800px; padding-bottom: 800px; } #container .zuo{ background-image:url(http://www.616sc.com/616/f_lm.gif)} #container .you{ background-image:ur...
Div + CSS Example, Wayhome's Blog #wrap{overflow:hidden;} #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} Left Middle Middle Middle Middle Middle Middle Middle Middle Middle Right
脚本控制三行三列自适应高度DIV布局 function P7_colH(){ var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa; if(dA&&dA.length){ for(i=0;i dA[i].style.height='auto'; } for(i=0;i oh=dA[i].offsetHeight;h=(oh>h)?oh:h; } for(i=0;i if(an){ dA[i].style.height=h+'px'; }else{ P7_eqA(dA[i].id,dA[i].offsetHeight,h); } } if(an){ for(i=0;i hh=dA[i...
这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 先看代码： #wrap{ overflow: hidden; }#sideleft, #sideright{ padding-bottom: 32767px; margin-bottom: -32767px; } 实现原理： 块元素必须包含...
CSS: #left{width:200px;min-height:400px;float:left;} #center{min-height:400px;margin:0 210px;} #right{width:200px;min-height:400px;float:right}; Html: 注意：HTML中三个div的顺序是 左、右、中；
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;Firefox IE测试通过.辛苦几天的结果啊平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.下面两句很重要的.百分比情况下窗口人为缩小的时候布局混乱问题就解决了. .divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.b...