如何將水平滾動條添加到具有垂直滾動條的父div的內部div？

Question

我有一個固定的高度一個div，其包括下一個定位成彼此兩個div：

<div id="idContainer"> 
    <div id="idPaneLeft"> 
    ... 
    </div><div id="idPaneRight"> 
    ... 
    </div> 
</div> 

內的div具有與應同時與一個共同的垂直滾動條來滾動相同的高度內容：

div#idContainer { 
//... 
    overflow-y: scroll; 
} 

這按預期工作。

樣品：http://jsfiddle.net/8dy8x4y1/

右內div的內容的寬度大於所述div的，並應與水平滾動條來滾動：

div#idPaneRight { 
    ... 
    overflow-x: scroll; 
} 

然而，增加該設置破壞格佈局，並且不可能同時滾動兩個內部div的內容與垂直滾動條。

樣品：http://jsfiddle.net/t1wy1vws/

任何解決問題的建議表示讚賞。

Answer 1

它似乎默認vertical-align: middle正在應用。

您只需要將vertical-align: top應用於兩個子元素。

而且，display: inline-block在內聯塊元素之間引入了一些空白區域。要刪除這些空間，我們需要提及父容器的font-size作爲0px，然後再將默認font-size應用於內聯塊子元素。

Updated Fiddle