如何在CSS中定位这些图像？

Question

我在将2张图片放置在CSS中的某些评论旁边时遇到一些麻烦。

我的评论应该是这样的：

这是现在的样子：

如何将该文本的第一行放在图像旁边？ 我试图将文本放在一个段落中，最后将第一行放在作者图像下方。 现在，我尝试将文本放在div中，但是最终将像第二张图片一样。

这是我用于评论的代码：

<div id="recensies_order">
    <div class="reviews item1"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
    <div class="reviews item2"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></</div>
    <div class="reviews item3"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
</div>

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
}

Answer 1

您要查找的术语是浮动的 。

在您的情况下，以下方法应该起作用（未试用）：

<div id="recensies_order">
    <div class="reviews item1">
       <img style="margin-right: 10px;" src="quotes.png" alt="quote" style="float: left" />
       <img src="author.png" alt="authorpic" style="float: left" />
       <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
</div>

当然，这些style添加应稍后再移入CSS文件。

JsFiddle演示

Answer 2

添加float: left; 查看所有图片

Answer 3

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
width:400px;
}
#recensies_order img{
    float:left;
    clear:right;
    margin:10px;
}
#recensies_order img+img{
    width:64px;
}

.reviews{
    width:100%;
    display:block;
    padding-bottom:10px;
}

JSFIDDLE演示

更改with并且您有以下内容：

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
width:300px;
}
#recensies_order img{
    float:left;
    clear:right;
    margin:10px;
}
#recensies_order img+img{
    width:64px;
}

.reviews{
    width:100%;
    display:block;
    padding-bottom:10px;
}

JSFIDDLE演示2

Answer 4

必须有其他影响spans代码。 您的代码很好。 图像和跨度默认情况下是内联的，因此它应该执行您要执行的操作。 你可以用浮漂做，但他们没有必要的。

这是一支带有您的代码的笔，浮动的图像和设置为inline-block图像。 http://codepen.io/anon/pen/pmJhL