用右边的图像换行文本

I have the below html which has an image and text. I want to wrap the text around the image. I have tried float but it does not seem to work. How can I do this?

我有下面的html，它有图像和文字。我想在图像周围包装文本。我试过漂浮，但似乎没有用。我怎样才能做到这一点？

using bootstrap.min.css classes – panel-body, col-md-12

使用bootstrap.min.css类 - panel-body，col-md-12

<div class="row"> 
  <div class="col-md-12">
    <div class="col-md-4 pull-right">
      <img class="img-responsive shadow"/>
      <p style="text-align:justify;float:left"> Text paragraph </p>
    </div>
  </div>
</div>

2 个解决方案

#1

Add the float-left class (Bootstrap 4) to the img :)

将float-left类（Bootstrap 4）添加到img :)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12">
    <div class="col-md-4 pull-right">

      <img data-src="holder.js/200x200" class="img-thumbnail img-responsive shadow float-left" alt="200x200" style="width: 200px; height: 200px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15fc706eff6%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15fc706eff6%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        data-holder-rendered="true">

      <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscingelit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

    </div>
  </div>
</div>

https://getbootstrap.com/docs/4.0/utilities/text/

#2

edit : Cassidy's answer above is a more elegant, bootstrap-centric fix if that's a better fit for what you're doing.

编辑：Cassidy上面的答案是一个更优雅的，以引导程序为中心的修复，如果它更适合你正在做的事情。

With your img and p tags in the same container, you can control them relative to one another, using float to position them as you've described.

将img和p标签放在同一个容器中，您可以相对于彼此控制它们，使用float来定位它们，如您所述。

Using the markup you provided, I've created a jsfiddle with some additions. Of course I've had to make a couple assumptions about what you'd like to do, but in this example is a working "wrap" of some text, around an image.

使用你提供的标记，我创建了一个带有一些附加功能的jsfiddle。当然，我不得不对你想做的事情做一些假设，但在这个例子中是围绕图像的一些文本的“包装”。

Basically, I've put both elements as siblings inside of a div, and have floated both elements to the left, allowing the larger text on the right to wrap around the img.

基本上，我将两个元素作为兄弟姐妹放在div中，并将两个元素都浮动到左边，允许右边的较大文本环绕img。

Snippet:

片段：

img.float_text_left {
  float: left;
  clear: none;
  margin: 15px;
}
span.float_text_right p {
  width: 65%;
  height: auto;
  float: left;
}

<div class="row"> 
  <div class="col-md-12">
    <div class="col-md-4 pull-right">
       <div class="float_text_right">
       <img class="img-responsive shadow float_text_left" src="http://www.ducatithailand.com/cms-web/upl/MediaGalleries/549/1/MediaGallery_1549306/Color_M-1200S_Grey-01_1067x600.jpg" width="250"/>
     
     <span>
       <p class=".float_text_right">
      Lorem ipsum dolor amet microdosing authentic mlkshk ugh, ramps next level enamel pin air plant roof party. Fingerstache artisan art party offal church-key PBR&B subway tile letterpress drinking vinegar bespoke farm-to-table yr. Forage hot chicken artisan retro, migas enamel pin seitan sustainable. Bushwick VHS health goth, austin trust fund thundercats beard small batch green juice sartorial street art iPhone 3 wolf moon hashtag. Shabby chic kitsch brunch, lumbersexual narwhal celiac hot chicken vaporware enamel pin polaroid. Tbh neutra hammock organic master cleanse biodiesel franzen fam pour-over etsy heirloom migas roof party.

Messenger bag meditation forage, tumeric wayfarers pabst sartorial schlitz food truck selfies locavore normcore keffiyeh cray. Selfies dreamcatcher mumblecore jean shorts health goth lyft. Distillery blue bottle actually, coloring book PBR&B letterpress meggings single-origin coffee bespoke iPhone migas palo santo poutine cray vexillologist. Slow-carb leggings meggings, fashion axe scenester XOXO single-origin coffee. Deep v pug synth ramps, VHS hammock man bun intelligentsia single-origin coffee.
     </p>
     </span>
    
      </div>
    </div>
  </div> 
</div>

#1