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

Question

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

这是我的评论应该是这样的：

这就是它现在的样子：

如何在图像旁边放置此文字的第一行？我试图将文本放在一个段落中，最终会使第一行位于作者图像下方。现在我已经尝试将文本放入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

您要找的字词是 floating 。

在您的方案中，以下内容应该有效（未经测试）：

<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 Demo

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 DEMO

改变了，你有这个：

#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 DEMO 2

Answer 4

必须有影响spans的其他代码。你的代码很好。默认情况下，图像和跨度是内联的，因此它应该执行您所追求的内容。您可以使用浮点数来完成它，但它们不需要。

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