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

左侧固定 右侧自适应 布局

时间:2015-07-01 12:06:38      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
* {margin:0; padding:0; list-style:none; } 
.wrapper{width: 100%; } 
.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1; height:100px; } 
.right {width:100%; background:#ccc; position:absolute; left:0;} 
.content{margin-left:200px; background:#ffc; height:100px;} 

</style> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="left">左侧固定宽度200px</div> 
    <div class="right"> 
        <div class="content01"> 
            右侧宽度自动适应 
        </div> 
    </div> 
</div> 
</body> 
</html> 

 

左侧固定 右侧自适应 布局

标签:

原文地址:http://www.cnblogs.com/yjhua/p/4612508.html

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