css - 固定幅コンテナー内のオーバーフロー:非表示のインライン ブロック要素がプッシュ ダウンされる

Question

ここで私のフィドルを参照してください：http://jsfiddle.net/Waterstraal/bMfbH/2/

HTML:

<div class="row">
    <div class="actionPanel"></div><div class="resultPanel"></div>
</div>

CSS:

.row {
    width:500px;
    height: 50px;
    overflow:hidden;
    border:1px solid #ccc;
}
.resultPanel {
    display:inline-block;
    width:450px;
    height: 50px;
    background: #ddd;
}
.actionPanel {
    display:inline-block;
    width:50px;
    height: 50px;
    background:#eee;
}

結果パネルを右に「スライド」したいのですが（アクションパネルと同じレベルのままです）、代わりにビューから押し出されます。

2 つの要素の幅の合計が親要素の幅よりも大きくなるように、actionPanel の幅が JavaScript で大きくなっています。

私が求めている効果を達成する方法を知っている人はいますか? フローティング要素を使用しようとしましたが、同じ結果になりました。また、テーブル要素を使用しようとしましたが、効果がありませんでした。

前もって感謝します。

Answer 1

css を変更:

body {
padding:10px;
}
.row {
width:500px;
height: 50px;
overflow:hidden;
border:1px solid #ccc;
}
.resultPanel { 
height: 50px; 
background: #ddd; 
}
.actionPanel {
float:left;
width:50px;
height: 50px;
background:#eee;
}