如果圖像在右邊，我怎麼能將文字換行？

Question

我試圖讓一些文字環繞放置在右邊的圖像（對於放置在左邊的圖像，它自動環繞）。任何想法如何做到這一點？這是我現在擁有的。

<div class="row clear"> 
    <div class="col-md-7 text-left"> 
      <div class="heading">Blash blah blsh</div> 
       <div class="feature-txt-body">This is a long piece of text that is so long that it needs to break into multiple lines. I am now writing some jibberish text and I have no idea what I am writing. I need to <b>only</b> focus on what's relevant to you. Now if you look at this line, it is not wrapping around the image.</div> 
      </div> 
    <div class="col-md-3"> 
    <div id="image"></div> 
    </div> 
</div> 

Answer 1

您可以使用自舉的.pull-right類（這基本上只是一個浮動：權）來實現這一點沒有使用列。

你可以看到它在這個bootply工作：http://www.bootply.com/sc6dvO9rj3

HTML（整理了一下）：

<div class="row"> 
    <img class="pull-right" width="100" height="100" src="..." /> 
    <h1>Blah blah blah</h1> 
    <p> 
     This is a long piece of text that is so long that it needs to break into multiple lines. I am now writing some jibberish text and I have no idea what I am writing. I need to <strong>only</strong> focus on what's relevant to you. Now if you look at this line, it is not wrapping around the image. 
    </p> 
</div> 

Answer 2

DEMO

<div class="row clear"> 
    <div class="col-md-7 text-left"> 
      <div class="heading">Blash blah blsh</div> 
       <div class="feature-txt-body"> 
    <div class="col-md-3"> 
    <div id="image" style="background:#000; width:200px; height:100px; float:right;"></div> 
    </div>This is a long piece of text that is so long that it needs to break into multiple lines. I am now writing some jibberish text and I have no idea what I am writing. I need to <b>only</b> focus on what's relevant to you. Now if you look at this line, it is not wrapping around the image.This is a long piece of text that is so long that it needs to break into multiple lines. I am now writing some jibberish text and I have no idea what I am writing. I need to <b>only</b> focus on what's relevant to you. Now if you look at this line, it is not wrapping around the image. This is a long piece of text that is so long that it needs to break into multiple lines. I am now writing some jibberish text and I have no idea what I am writing. I need to <b>only</b> focus on what's relevant to you. Now if you look at this line, it is not wrapping around the image</div> 
      </div> 

</div> 

文本格內放圖像將使其漂浮到文本的右側包裝方式

Answer 3

工程與平淡，乏味的html：

<img align="right" src="..." /> 

http://jsfiddle.net/jpvk2sLt/

我會建議CSS變種float:right以及雖然