日々精進

新しく学んだことを書き留めていきます

スクロール領域内にfloatでdivを横に並べるとスクロールせず折り返してしまう問題

□がDIVで|が親DIVのEdgeとすると、以下のようにしたい。

|□□□□|

親DIVの幅は固定で、中のDIVの数が増えたら横スクロール出来ようにしたい。 が、中のDIVをfloatを使って横並びにしていたので中のDIVを増やすと以下のように折り返してしまう。

|□□□□|
|□   |

こういう場合、中のDIV全体を囲むDIVをwidth固定で定義すればよい。 中のDIVの数が動的に変わる場合、その数に応じて囲むDIVのwidthを変更しないといけないのでng-styleを使って動的に計算する必要がある。