作為一個前端，所見的最多的就是左右布局的情況，無論框架還是各種寫法中都有左右布局，然而有些情況下非常讓人頭疼，那就是一側固定寬度，另一側根據屏幕或者外層寬度自動適應，例如表單：
如圖所示：左右布局，但是左側按照百分比排版的，在屏幕小的情況下非常擁擠，在屏幕寬的時候非常寬松，不能夠做到左邊固定寬度（因為左側是固定的幾個文字），右側自動適應。類似問題還有N多，比如后台界面左右布局形式，tab選項卡左右布局形式等等。
一、使用JavaScript來計算的弊端
- 麻煩，寫一大堆，然后不一定對。
- 效率低，改變屏幕或者改變外層div寬度，效率極低。
- 樣式和JavaScript不分開，非常不規整。
二、使用css3的calc計算的弊端
弊端：一言以蔽之，兼容性不好
優點：簡單易用，效率高，能解決兼容性是最好不過了，能不能使用css2.0來寫出這個效果呢，答案是能！
三、使用定位法實現calc
具體的布局如上，父元素定位，左側固定寬度的元素定位，右側自動適應寬度，使用padding來撐開被定位元素占有的那部分，這樣就能達到右側寬度根據父元素的寬度適應，而且左側達到固定寬的效果。左右顛倒亦如此。
優點：
- 兼容所有瀏覽器
- 容易理解，效率高
注意：
盒子的整體高度，是那個非定位元素撐開的，所以在書寫的過程中一定要注意誰撐開的整個父層，如此例中，如果右側高度很低，那么左側因為定位是無法撐開的（左側也可考慮使用絕對定位，或者使用min-height等，大家可以試驗一下。）。