html - 将图像和文本并排放置

Question

我已经浏览了本网站上关于我的问题的一些帖子，但我似乎在使用解决方案时遇到了问题。

这是我的 HTML:

<div align="left"><div id="imgleft"><img src="tradecurrencymain.png" /></div></div>
<p>There's two different trade types: a market order and a limit order.</p>
<p>A market order allows a trade to be excuted immediately using the current trading ratio; 16 tokens equals 1 coin and 1 coin equals 15 tokens. A limit order gives you more cotrol; you can choose how much coins/tokens you will receive. For example, you may want to trade 100 tokens for 95 coins - someone has to accept the trade though.</p>

这是我的 CSS:

#imgleft {
 margin-right: 30px;
 margin-left: 30px;

如果有人可以解释如何让图像和文本直接相邻，我们将不胜感激。

Answer 1

链接到 JSFIDDLE .

我将所有内容都包装在包装器 (wrapper) 中，然后向左浮动“imgleft”。这是代码:

HTML

<div class="imgWrap" align="left">
<div id="imgleft">
    <img src="https://t2.ftcdn.net/jpg/00/31/93/43/400_F_31934352_QzlwTKN58UqGWtVEaSBvgOPqvfYxrIb7.jpg" />
</div>
<p>There's two different trade types: a market order and a limit order.</p>
<p>A market order allows a trade to be excuted immediately using the current trading ratio; 16 tokens equals 1 coin and 1 coin equals 15 tokens. A limit order gives you more cotrol; you can choose how much coins/tokens you will receive. For example, you may want to trade 100 tokens for 95 coins - someone has to accept the trade though.</p>

CSS

#imgleft {
float: left;
margin-right: 30px;
margin-left: 30px;
}