首页 > 代码库 > 常见的布局方法整理[兼容]

常见的布局方法整理[兼容]

2024-07-14 11:21:16   219人阅读

一行两列左侧固定右侧自动适应

<!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>

效果：

QQ截图20140728145013

三栏中间自动适应

<!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>

 

QQ截图20140728150056

 

左边两栏右边自动适应

<!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>

 

QQ截图20140728150905

右边固定左边自动适应

<!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>

 

QQ截图20140728151710


联系
我们