CSS divが画像の横に浮いていません

Question

私はレスポンシブデザインをしようとしています。スクリーンが小さいときは、コメントは "Slikica"（シアンDIV）の下になければなりません。しかし、私がデスクトップ版を使用しているとき、私はコメント（グレイの部分）をイメージの周りに歪ませたい。

• シアンdivの幅は固定されており、左に浮いています。
• 灰色のdivは長さが不明（最大200桁）で、Cyan divの右にある必要があります。彼らはまた、左に浮かんでいます。
• 幅を設定した場合、たとえばすべて300pxであれば問題ありません。

以下の画像をご覧ください。数千語分の価値があります。

<div id="content"> 
    <div id="slikica">Slikica</div> 
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div> 
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div> 
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div> 
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum dui ut enim rutrum congue. Nulla ut odio vel metus pharetra aliquet. Proin nec erat non nisl semper sagittis. Pellentesque sed.</div> 
    <div class="gray">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet interdum enim eget sollicitudin. Praesent eleifend interdum odio sit amet luctus. Nulla egestas eros vitae dui tincidunt amet.</div> 
    <div class="gray">Quisque non ligula id dolor tincidunt imperdiet at et libero. Cras eu sapien mi. Phasellus sollicitudin accumsan vehicula. In fermentum, sapien vitae ullamcorper porttitor, felis sem dapibus est amet.</div> 
    <br class="clrfix" /> 
</div> 

jsFiddle link

Answer 1

ただ、コメントのDIVにfloat: left;を削除します。それぞれのコメントを前のものに残しておくと、それらはビューポートに収まらなくなります。

http://jsfiddle.net/feeela/Xtuc9/1/

Answer 2

コメントdiv要素に次のCSSを追加してみてください：

問題は、あなたのdivが最大幅に到達するために拡大することである

display:inline; 

Answer 3

（その場合は<div id="content">）。彼らは青を脇に収めるにはあまりにも大きな幅に達すると、クリップダウンします。あなたが必要とするのは、それらがその幅に達するのを妨げるものを置くことです。

これには2つの方法があります。

1. width: 600px（またはそのスペースに収まるもの）でdivを置き、その中に灰色のdivをすべて入れます。 JSFiddle（あなたはそれが動作することを確認するために、結果ウィンドウを拡大する必要があります）
2. すべてのdiv要素にmax-widthを入れて（例：max-width: 600px）

Answer 4

あなたは灰色のdivからfloat: left;を削除し、シアンのdivの幅よりも左に等しいマージン（またはそれ以上）を追加した場合、彼らは右にスペースを占有します。より多くの灰色divがある場合、マージンのためにシアンdivを囲むことはありません。この行動が必要なのかどうかわかりません。それ以外の場合は、マージンとフローティングの両方をスキップしてシアンdivを囲むことができます。