横並び表示で横スクロールバーを出すボックス

More than 3 years have passed since last update.

<div class="parent">

<div class="child">

aaaa

</div>

<div class="child">

bbbb

</div>

</div>

.parent{overflow-x:auto; overflow-y:hidden; width:100%; white-space:nowrap;}

.child{display:inline-block; margin-right:1%; width:19%; vertical-align:top; white-space:normal;}

marginとwidthは適宜変更

white-spaceは親をnowrapすることで下に落とさないようにする。子はwidth内に表示させたいので、normalに戻す。

overflow-x,overflow-yは両方設定。webkit対策のため。

display:inline-blockで横に並べられる。vertical-align:topで上に合わせるよう並べる。

参考ページ

http://okazuki.hatenablog.com/entry/20130129/1359440307