テキストを折り返さずに画像を左右に浮かべる方法

Question

以下のCSSを使用して、この画像をテキストの左側に浮かべています。同じページのテキストの右側にイメージのエフェクトをどのように繰り返しますか？たとえば、左と右の間にクリアフィックスが必要ですか？私は何をするマスターのスーパークラスを作成している
：フロートのための.Flと.frは、左と右のフロートとちょうど私が作るに行くようにそれを適用

おかげ

.innercontent { 
padding: 0 0 0 185px; 
position: relative; 
text-align:justify; 
} 

.innercontent img { 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

<div class="innercontent"> 
    <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" /> 
    <p>Lorem ipsum dolor sit amet....</p> 
</div> 

Answer 1

は、次のようなCSSをより具体的にします私のコードクリーナーと彼らはHTML文書を介してそれを見るときに従うことは簡単です。 .innercontent img.fl { 埋め込み：0 0 0 185px; 位置：相対; text-align：justify; }

.innercontent img { 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

<div class="innercontent"> 
    <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" /> 
    <p>Lorem ipsum dolor sit amet....</p> 
</div> 

明確ではなかった場合だけ、このへ投稿：D

Answer 2

は、私はちょうど左に両方の要素をフロートでしょう。これにより、両方の要素がサイトに並べて表示されます。

[HTML] （左側IMG）

<div class="innercontent"> 
    <img class='floatLeft' /> 
    <p class='floatLeft'>Lorem ipsum dolor sit amet....</p> 
    <div class='cleaner'></div> 
</div> 

（テキストの右側にあるIMG）

<div class="innercontent"> 
    <p class='floatLeft'>Lorem ipsum dolor sit amet....</p> 
    <img class='floatLeft' /> 
    <div class='cleaner'></div> 
</div> 

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.floatLeft{float: left;} 

クリーナーを返すために使用されています浮動小数点数の要素の後ろの左に戻る次の要素。私は要素を浮かべた後、常にこれを置く。それは通常それなしで正常に動作しますが、私は他の "floated"要素で要素を浮動させる傾向があります。

また、CSSでは、imgを直接floatに指定する必要があります。 ます。http：// jsfiddle私のような...ここ

.floatLeft>img{float: left;}