結構說明：左右兩部分寬度固定，中間的部分填充剩余所有寬度。
常用場景：最左邊擺放一張圖片，中間擺放說明性文字，右邊擺放相關操作的小圖標。
之前的做法雖然有實現但是不完美。思路如下（簡單描述為左中結構）：
首先考慮中間的要拉伸鋪滿剩下的寬度，必須寬度設置成百分比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>