一行两列左侧固定右侧自动适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>home</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;} table {border-collapse: collapse; border-spacing: 0;} img {border: 0;} ol,ul{list-style: none;} h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;} .clear:after{content:"";display:block;clear:both;} .clear{zoom:1;} #content{overflow: hidden;} #box{height: 700px; width: 100%;background: #2ba343;float: left;} #right{margin-left: 300px;background: #2828d9;height: 600px;} #left{width: 300px; height: 600px; background:#ffc118;float: left;margin-left: -100%;} /* 个人理解:用百分百单位如果左边固定的话，右边是百分之多少肯定不知道，问题来了 100%-npx？显然不可能，css不支持计算 解决办法: 1.box用百分百表示在最底层 2.right给margin-left相当于向右让出300px给固定值一个位置由于固定值挡住了所以视觉上就是固定—+自定适应； 3.结构right为什么放在右边。 如果左边放在前面在最前面 -100%没有参考对象他负浏览器里去了 放前面就是给他个参考对象让他成立 注: content只是个结构层没有其他实际意义。 right不用浮动 因为他是box的子级层级本身就比box高浮动也还是高。 */ </style> </head> <body> <div id="content"> <div id="box"> <div id="right">right</div> </div> <div id="left">left</div> </div> </body> </html>
效果：
三栏中间自动适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>home</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;} table {border-collapse: collapse; border-spacing: 0;} img {border: 0;} ol,ul{list-style: none;} h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;} .clear:after{content:"";display:block;clear:both;} .clear{zoom:1;} #content{overflow: hidden;} #box{height: 700px; width: 100%;background: #2ba343;float: left;} #right{margin: 0 200px 0 300px; background: #2828d9;height: 600px;} #left{width: 300px; height: 600px; background:#ffc118;float: left;margin-left: -100%; } #other{height: 600px; width: 200px; background: #f90;margin-left: -200px;float: left;}在上一个的基础上 把right层右边让出200px
然后右边的div浮动 margin-left 写负的本身宽度就负到一行显示了
</style> </head> <body> <div id="content"> <div id="box"> <div id="right">right</div> </div> <div id="left">left</div> <div id="other">other</div> </div> </body> </html>
左边两栏右边自动适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>home</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;} table {border-collapse: collapse; border-spacing: 0;} img {border: 0;} ol,ul{list-style: none;} h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;} .clear:after{content:"";display:block;clear:both;} .clear{zoom:1;} #content{overflow: hidden;} #box{height: 700px; width: 100%;background: #2ba343;float: left;} #right{margin-left: 600px;background: #2828d9;height: 600px;} #left{width: 600px; height: 600px; background:#ffc118;float: left;margin-left: -100%;} #left1{float: left;height: 600px; width: 300px; background:#2aa1eb;} #left2{float: left;height: 600px; width: 300px; background:#ea541e;}
在left中插入两个div </style> </head> <body> <div id="content"> <div id="box"> <div id="right">right</div> </div> <div id="left">left <div id="left1"></div> <div id="left2"></div> </div> </div> </body> </html>
右边固定左边自动适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>home</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;} table {border-collapse: collapse; border-spacing: 0;} img {border: 0;} ol,ul{list-style: none;} h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%;} .clear:after{content:"";display:block;clear:both;} .clear{zoom:1;} #content{overflow: hidden;} #box{height: 700px; width: 100%;background: #2ba343;float: left;} #right{margin-right: 300px;background: #2828d9;height: 600px;} #left{width:300px; height: 600px; background:#ffc118;float: left;margin-left: -300px;}
给right右边留出300px 也就是div宽度 然后 用负值负到一行 就ok </style> </head> <body> <div id="content"> <div id="box"> <div id="right">right</div> </div> <div id="left"> </div> </div> </body> </html>
原文：http://www.cnblogs.com/aix1314/p/3873129.html