Question

我们如何在<p>我试过的段落的右侧显示图像，但它始终位于<p>

之下

小提琴http://jsfiddle.net/ECEka/44/

的例子

<div class="service-list">
    <p>text goes here text goes heretext goes heretext goes heretext goes heretext goes here
    text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
        <p>text goes here text goes heretext goes heretext goes heretext goes heretext goes here
    text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
    <img src="https://www.google.co.in/images/srpr/logo4w.png" alt="icon" width="200" height="auto" />
</div>

Answer 1

更改html的顺序：将<img>放在<p>之前;

DEMO

这就是你要找的东西吗？

Answer 2

您必须将图像放在p标记内（位于顶部），然后将其向右浮动。

JS Fiddle Demo

<强> HTML

<div class="service-list">
    <p>text goes here text goes heretext goes heretext goes heretext goes heretext goes here
        text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
    <p>
        <img src="https://www.google.co.in/images/srpr/logo4w.png" alt="icon" width="200" height="auto" />text goes here text goes heretext goes heretext goes heretext goes heretext goes here
        text goes here text goes heretext goes heretext goes heretext goes heretext goes here</p>
</div>

<强> CSS

.service-list {
    width: 600px;
    margin-left:0px;
    padding-left:0px;
    display: block;
    background-color:yellow;
}
.service-list p img {
    float:right;
}
.service-list p {
    text-align: left;
    display:block;
    padding: 0;
}

如何使图像显示在para标签p旁边

2 个答案: