CSS三联布局，两端固定，中间自适应

1、float方法

 给左右增加浮动，中间不变，但是一定要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧

• 两边固定宽度，中间宽度自适应。

• 利用中间元素的margin值控制两边的间距

• 宽度小于左右部分宽度之和时，右侧部分会被挤下去

<div class="left">左</div>
<div class="right">右</div>
<div class="middle">中</div>

 

        .left{
            background-color: blue;
            height: 100px;
            width: 100px;
            float: left;
        }
        .middle{
            background-color: yellow;
            height: 100px;
            margin-left: 150px;
            margin-right: 150px;
        }
        .right{
            background-color: red;
            height: 100px;
            width: 100px;
            float: right;
        }

2、position方法 

用绝对定位，不用考虑div的顺序，但是有顶部对齐问题，需要进行调整，中间的高度为整个内容的高度

        .left{
            background-color: blue;
            height: 100px;
            width: 100px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .middle{
            background-color: yellow;
            height: 100px;
            width: 100%;
            top: 0;
        }
        .right{
            background-color: red;
            height: 100px;
            width: 100px;
            position: absolute;
            right: 0;
            top: 0;
        }

 

 还有其他的一些方法例如双飞翼布局和display:flex，待更新。。。