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

 

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;
      }

　　

 

posted @ 2017-05-09 19:17  llauser  阅读(318)  评论(0)    收藏  举报