码迷,mamicode.com
首页 > 其他好文 > 详细

左边固定,右边自适应布局的两种实现

时间:2017-05-09 20:37:48      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:absolute   javascrip   bsp   blog   body   浮动   适应   back   abs   

 

html结构:

<body>
<div class="left"></div>
<div class="right"></div>
</body>

 第一种:float实现,左边浮动+右边正常文档流 

	   html,body{
	    	width: 100%;
	    	height: 100%;
	    }
      .left{
      	float:left;
      	width: 300px;
      	height: 100%;
      	background: red;
      }
      .right{
      	height: 100%;
      	background: blue;

      }

  

第二种:position定位脱离文档流+margin

	   html,body{
	    	width: 100%;
	    	height: 100%;
	    }
      .left{
      	width: 300px;
        position: absolute;
      	height: 100%;
      	background: red;
      }
      .right{
      	margin-left: 300px;
      	height: 100%;
      	background: blue;
      }

  

 

左边固定,右边自适应布局的两种实现

标签:absolute   javascrip   bsp   blog   body   浮动   适应   back   abs   

原文地址:http://www.cnblogs.com/llauser/p/6832213.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!