我在 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;
}
最佳答案
您要查找的词是 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 文件中。
关于html - 如何在 CSS 中定位这些图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22385821/