首页 > 其他 > 详细

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

时间:2017-05-09 20:31:12      阅读:337      评论:0      收藏:0      [点我收藏+]

 

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

  

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!