html - div内のテキストは折り返されません

Question

ここに見られるように：http：//jsfiddle.net/EhnuZ/一番上のグループには少量のテキストがあり、テキストは画像の右側にあります。下のグループは、内部にテキストが多いことを除いて同じです。ただし、これにより、テキストが希望どおりに折り返されるのではなく、画像の下に移動します。これはどのように解決できますか？私が試してみました：

white-space:normal;
word-wrap: break-word;
width:50%;
max-width:50%;

Answer 1

テキストコンテナにを指定する必要がありますwidth。そうしないと、自動的に幅の100％になろうとします。

.text{
         vertical-align:top;
         display:inline-block;
         width: 30%;
    }

Answer 2

またはそれに含まれる要素の1つに幅<p>がないと、ブラウザのレンダリングエンジンが、要素が拡張されてコンテナを満たすのを妨げる理由はありません。

あなたがしたいのは、その上にwidthまたは を設定することによって、その親の段落の幅を制限することですmax-width

Answer 3

画像にfloat：leftを使用してみましたか？