左侧固定 右侧自适应三种方法

第一种：float 单一层浮动法

例如：左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px;

实例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>z-index</title>  
<style type="text/css">  
    *{margin:0;padding:0;}  
    .container{height:200px;}  
    .left{width:100px;border-right:none;height:50px;float:left;background-color:yellow;}  
    .right{margin-left:100px;width:auto;height:100px;background-color:blue;}  
</style>  
</head>  
<body>  
    <div class="container">  
        <div class="left"></div>  
        <div class="right"></div>  
    </div>  
</body>  
</html>

第二种 定位 ，在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度

 实例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>z-index</title>  
<style type="text/css">  
*{margin:0;padding:0;}  
.container{height:200px;}  
.left{width:100px;height:50px;background-color:blue;position:absolute;left:0;top:0;}  
.right{margin-left:100px;height:100px;background-color:yellow;}  
</style>  
</head>  
<body>  
    <div class="container">  
      <div class="left">left</div>  
      <div class="right">right</div>  
    </div>  
</body>  
</html>

第三种 定位 ，用css3的 calc()进行计算

 实例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>z-index</title>  
<style type="text/css">  
*{margin:0;padding:0;}  
.container{height:200px;}  
.left{width:100px;height:50px;background-color:blue;}  
.right{width: calc(100% - 100px); height:100px;background-color:yellow;}  
</style>  
</head>  
<body>  
    <div class="container">  
      <div class="left">left</div>  
      <div class="right">right</div>  
    </div>  
</body>  
</html>

 

posted @ 2017-07-24 16:09  辣牛  阅读(781)  评论(0)  编辑  收藏  举报