容器左右布局方法

一个容器左右布局，左边固定宽度，右边自适应宽度

1.利用css3的cacl(算术表达式) 属性来设置宽度  cacl 运算符左右两边必须要有空格

​

<style>

.div1{width: 200px; height: 300px; background-color: yellow;float: left;margin-right: 10px;}

.div2{width: calc(100% - 210px);height: 300px;float:left;background-color: cornflowerblue;}

.box{clear: both;}   /*记住要清除浮动*/

</style>

<div> <div class="div1"></div>  <div class="div2"></div>  </div>

[点击并拖拽以移动]
​

2.使用margin负值，右边和左边在同一行，再给右边容器一个子容器，设置margin-left为左边容器宽度

（使用margin负值，浏览器认为这个元素的大小变小了，所以会改变布局，布局会按照元素的大小减去负margin的大小进行布局，实际上并没有变小，所以布局变化后显示的还是原大小）

<style>

.div1{width: 200px;height: 300px;background-color: yellow;float: left;}

.div2{width: 100%;height: 300px;background-color: blue;float: left;margin-left: -200px;}

.div3{margin-left: 200px;background-color: green;height: 300px;}

<style>

<div>

   <div class="div1"></div>  <div class="div2">  <div class="div3"></div> </div>

</div>

3.使用position，有容器必须设置right（这个方法实现相对比较简单一点）