整体效果图： 话不多说，大家自己看，相信会有帮助 < 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...
如何使整个页面内容居中，如何使高度自适应内容自动伸缩，这是学习CSS布局最常见的问题。 下面给出一个实际的列子，附详细说明。 首先可以将下列代码复制到html文件中运行一下，在mozilla、opera和ie浏览其中，均可达到居中且自适应高度的要求。 body { background:#999; text-align:center; color:#333; font-family:Arial, Verdana, Sans-serif; } #header { wid...
height:auto !important;height:200px; /*假定最低高度是200px*/min-height:200px; 这个在IE6下不起作用的，在IE6下需要把height:200px; /*假定最低高度是200px*/去掉就可以了......(做的时候是这样，不过还不太清楚这个自适应，先记下来吧~！)
CSS等高布局 *{ margin:0; padding:0; } #wrap{ width:1000px; margin:0 auto; overflow:hidden; zoom:1;/* for ie6 */ } #left,#center,#right{ margin-bottom:-10000px; padding-bottom:10000px; } #left{ float:left; width:250px; background:#00FFFF; } #center{ float:left; width:500px; background:#FF0000; } #right{ float:right; width:250px; background:#00FF00; } ...
有时候我们会有这样的需求，如图，aside是导航或者某些链接，右边的main是显示重要的内容，左边需要定宽，右边的main能够自适应剩余的宽度： test *{margin:0; padding:0;} /* div{border:1px solid #CCC;} */ .home{width:70%; min-width:270px;margin:0 auto;} .header{height:80px; width:100%; background:#CCC} .nav{height:50px; width:...
Layer - left Layer - right right right right right right right right right right right right
求一个自适应浏览器窗口的DIV布局页面 回复讨论(解决方案) 这个得你自己写了，宽度百分比和最小宽度控制就可以了。 别人给你的，结构不同，一改还是会乱的，也很麻烦的，并且这样的布局，你会改，就可以写。 改的话，还不如自己写的舒服。自己写的话，可以有更深刻的认识哦，加油啊！ 一般用table吧，将宽度设置成百分比…… 建议用div+table进行布局，可参考下面的
在CSS内的DIV定义如下 div,li,td,p,select,input,textarea,a,button,input{font:12px Verdana, Arial, Helvetica, sans-serif;color:#505050;text-decoration: none;overflow:hidden;word-break:break-all;word-wrap: break-word; } 可是，内容要么被截断，如下图： 内容要么就把DIV撑破了，直接在外面显示，如下图： 如果刷新一下，则可以正常显示。 不知应该如何解决。 请指教 回复讨论(解...