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

你的img应该在你的<p>元素中：

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

然后只需制作图片float:left;

Answer 2

如前所述，您需要将浮动图像移动到文本的前面。这是一个有效的代码：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 3

这是一个工作小提琴，实现这一目标的最佳方法是将图像放在文本中的某个位置，比如一段或两段之后：

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

<强> CSS：

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

一行文字中的图像/段落

3 个答案: