Question

我有下面的html，其中包含图片和文字。我想在图像周围包装文字。我试过漂浮，但似乎没有用。我怎么能这样做？

使用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>

Answer 1

将 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/

Answer 2

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

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

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

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

段：

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>

用右边的图像换行文本

2 个答案: