image - 最大幅を超えないように画像をdivでラップします

Question

いくつかの画像を表示していますが、divの最大幅の制限に達したときに次の行に移動してもらいたいと思います。

私は多くのことを試しましたが、どれもうまくいきませんでした。

これが問題です。画像がDIVから出てきます。

http://i.imgur.com/68bqa.png

最初のアイコンの下に最後のアイコンを配置したいので、そうします。つまり、divの幅を超えないようにします。彼らが限界に達したとき、自動的に限界を尊重し、次の行に進みます。

それは難しいことではないはずです、私はただ方法がわかりません。

これはhtmlです：

<div class="awards-member">
<a href="blabla"><img src="blabla.png"></a>
<a href="blabla1"><img src="blabla1.png"></a>
<a href="blabla2"><img src="blabla2.png"></a>
<a href="blabla3"><img src="blabla3.png"></a>
<a href="blabla4"><img src="blabla4.png"></a>
</div>

そしてこれはcssです：

.awards-member {
    width: 150px;
    }

.awards-member img{
    display: inline-block;
    }

何か案が？たくさんの男性に感謝します！

Answer 1

試す

.awards-member {
    width: 150px;
    white-space:normal;
    }