如果图像在右边，我怎么能将文字换行？

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以及虽然