圖像中的文本行/段落

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; 
}