一定一自适应：左定宽，右自适应；左自适应，右定宽

两个div，一侧定宽一侧自适应，涉及的原理：①div有个默认的属性，即如果不设置宽度，那他会自动填满父标签的宽度（也可以说是块级元素的属性）；②自适应区不能设置浮动，因为一旦浮动就不是块级元素了，而是行内块，失去了块级元素的默认属性；③position:absolute；绝对定位不受流式布局影响；④calc()用在CSS中动态计算长度值；

一、两个div，左侧定宽200px，右侧自适应：

<div class="left"></div>
<div class="right"></div>

1.第一种解决方案：

    定宽区浮动，自适应区不设宽 设margin

       .left {
            width:200px;
            height: 80px;
            background-color: red;
            float:left;
        }

        .right {
            height: 100px;
            background-color: blue;
            margin-left: 200px;
        }

2.第二种解决方案：

    定宽区绝对定位，自适应区不设宽 设margin  

       .left {
            position: absolute;
            width: 200px;
            height: 80px;
            background-color: red;
        }

        .right {
            height: 100px;
            background-color: blue;
            margin-left: 200px;
        }

3.第三种解决方案：

    外层加个父div display:table，子div display:table-cell;  

    <div class="outer">
        <div class="inleft"></div>
        <div class="inright"></div>
    </div>

       .outer {
            display:table;
            width:100%;
            min-height:100px;
        }
        .inleft {
            width:200px;
            background-color:red;
            display:table-cell;
        }
        .inright {
            background-color:blue;
            display:table-cell;
        }

   此方法只适用于两个div等高。

效果如下：

二、两个div，左侧自适应，右侧定宽200px：

对于右侧定宽，左侧自适应的两种方法照搬到这里是不起作用的，因为在流式布局中是从上到下，从左到右，所以对于左定右自适应还是比较占优势的。

下面看下怎么解决左自适应右定。

1.第一种解决方案：

    左侧宽度width用calc计算，右侧绝对定位 

       .left {
            height: 80px;
            margin-right: 200px;
            background-color: red;
            width: calc(100% - 200px);
            float: left;
        }

        .right {
            width: 200px;
            height: 100px;
            background-color: blue;
            position: absolute;
            right: 0;
        }

2.第二种解决方案：

   左右div换位置，左侧不设宽 设margin，右侧浮动

     <div class="right"></div>
     <div class="left"></div>

       .left {
            height: 80px;
            margin-right: 200px;
            background-color: red;
        }

        .right {
            width: 200px;
            height: 100px;
            background-color: blue;
            float: right;
        }

3.第三种解决方案：

    外层加个父div display:table，子div display:table-cell; 

    <div class="outer">
        <div class="inleft"></div>
        <div class="inright"></div>
    </div>

	.outer {
            display:table;
            width:100%;
            min-height:200px;
        }
        .inleft {
            background-color:red;
            display:table-cell;
        }
        .inright {
            width:200px;
            background-color:blue;
            display:table-cell;
        }

     此方法只适用于两个div等高的情况。

效果如下：