图像中的文本行/段落

Question

我试图将一个图像插入一个段落看起来像球这个图像中的：

。

如果有问题，我正在使用Bootstrap。

我一直在玩弄使用

<div class="col-md-8 col-xs 8"> 
    <h1><?php echo $config["First"]["Title"];?></h1> 
    <p><?php echo $config["First"]["Text"];?></p> 
    <?php echo '<img src="img/ball.png" class="img" style=" 
      float: right; 
      position: relative; 
    ">';?> 
</div> 

这我已经想出尚未，但它只是下面的文字，不在内部去。

这是p标签的CSS：

p { 
    color: rgba(180, 180, 180, 1); 
    position: relative; 
    float: left; 
} 

Answer 1

如前所述，你需要移动floa将图像放在文本的较早部分。这里有一个工作codepen：http://codepen.io/vic3685/pen/GqLyWX

<section id="first" class="first-section"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-4 col-xs 4"> 
        <img src="http://placekitten.com/200/300" class="img-responsive" style=" 
        width: 100px; float: left; 
        "> 
       </div> 
       <div class="col-md-8 col-xs 8"> 
        <h1>Title field here</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt risus sagittis, molestie sapien vitae, finibus libero. Nunc ac elit pharetra, semper urna in, mollis nulla. Donec eget vehicula libero. Suspendisse porttitor diam at tellus placerat pharetra. Donec suscipit, ligula vitae auctor vulputate, risus erat pretium leo, ut laoreet libero sem in sem. Quisque et massa fermentum, molestie lacus et, auctor risus. Duis pretium lacinia massa, a semper justo gravida quis. Integer non arcu lectus. Ut vulputate et ipsum et molestie. Donec id iaculis justo. Praesent leo lacus, posuere id ligula at, semper volutpat magna. Suspendisse id laoreet erat, tempus commodo neque. Pellentesque dignissim laoreet vestibulum. Vivamus laoreet tristique commodo. Curabitur vestibulum rutrum urna nec lacinia.</p> 

<p><img src="http://placekitten.com/200/300" class="img" style=" 
        display: inline-block; 
        position: relative; 
        float: right; 
        width: 150px; 
        ">Praesent a scelerisque augue. Nulla gravida mauris a mauris malesuada, et facilisis justo maximus. Praesent convallis gravida molestie. Morbi dignissim felis a urna egestas tristique. Nulla facilisi. Cras ipsum lorem, interdum non mi et, convallis molestie diam. Vivamus pellentesque fringilla est sit amet tempor. Sed vulputate, eros non aliquet feugiat, lectus urna laoreet arcu, quis malesuada sapien eros ut est. Ut scelerisque faucibus commodo. In finibus accumsan augue quis blandit. Phasellus maximus urna arcu, vitae malesuada risus rutrum a. Nam non augue eget metus varius pretium vitae ut turpis. Integer non elit odio. Nullam nec fermentum ante, sit amet mattis turpis. Maecenas felis lectus, semper sed leo ut, ullamcorper placerat orci. 
        </p> 
<p> Nam iaculis interdum urna, at varius turpis vulputate id. Nulla eu odio eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et suscipit nisl. Curabitur eu faucibus tortor. Proin eget lorem at lectus fringilla porta quis nec dolor. Curabitur metus arcu, ullamcorper ac gravida nec, tristique suscipit lorem. Donec auctor sodales risus eu fermentum.</p> 

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

有关花车更深入的信息，请参阅：https://css-tricks.com/all-about-floats/

Answer 2

你的IMG应该是你<p>的元素：

<p><img src="imgs/ball.png" class="img" />paragrag content goes here</p> 

接下来，只要你的形象float:left;

Answer 3

这里是工作提琴，要做到这一点是通过将图像在某一点的最好办法在文中，一个或两个段落后说：

https://jsfiddle.net/5p4xdLto/1/

CSS：

.wrapper { 
    position: relative; 
} 
.left { 
    width: 100px; 
    position: absolute; 
} 
p { 
    padding-left: 120px; 
} 
.right { 
    float: right; 
    width: 100px; 
}