css布局之左中右结构总结

结构说明：左右两部分宽度固定，中间的部分填充剩余所有宽度。
常用场景：最左边摆放一张图片，中间摆放说明性文字，右边摆放相关操作的小图标。
之前的做法虽然有实现但是不完美。思路如下（简单描述为左中结构）：
首先考虑中间的要拉伸铺满剩下的宽度，必须宽度设置成百分比100%，用box-sizing设置为border-box，然后配合padding，给左右留固定的宽度，左右的内容放到padding区域与其重叠，使用float浮动是不能重叠的，所以一定要有一个是绝对定位，全部都使用绝对定位是没有问题的，但是绝对定位有个特性，定位的元素从文档流中删除，不占用空间，导致父元素不能自动适应高度，如果全部都绝对定位，父元素不显示指定高度，那么高度会为0，导致后面的元素和要排列的左中右结构重叠了。浮动元素本来也是脱离了文档流，不占用空间，但是父元素设置成内联块之后，它能占用空间（不理解内联块的性质）。于是就用绝对定位和浮动来混合实现，多数情况下，左边的图片宽度和高度都固定，于是就把左边的内容设置成绝对定位，中间的内容设置成浮动了，父元素再设置个最小高度为左边内容的高度，规避高度适应问题。
上述实现如果遇到左边和中间的内容高度都不确定，那就不好使了。今天终于想出另一种方案，思路如下：
全部都用浮动，关键要解决中间元素宽度为100%之后，左中右总宽度超过父元素宽度，导致换行的问题。借助外边距margin设置为负值解决了。中间内容把padding-left设置成左右部分宽度的和，把margin-left设置成padding-left对应的负数，就缩减了真实宽度了，恰好合适。
示例代码：

<div style="display:inline-block;width:100%;">
    <div style="float: left; width:100px;">
        左边
    </div>
    <div style="float: left;box-sizing:border-box;width: 100%;padding-left: 150px;margin-left: -150px;">
        中间
    </div>
    <!- 此处float等于left只是为了让它浮动，处在第三个节点，已经是布局的右边 ->
    <div style="float: left; width:50px;">
        右边
    </div>
</div>