插入图像和文本

Question

我正在尝试插入图像和文本。当我插入div时，它将图像放在下一行。 div有一个背景图像设置。这是我的代码：

Chat Rooms <div class="dot"></div>

文本按中心对齐。

Answer 1

使用带有右侧或左侧选项的float

Chat Rooms <div class="dot" style="float: right;"></div>

Answer 2

  

浏览器总是在元素之前和之后放置换行符。

http://www.w3schools.com/tags/tag_div.asp

所以你必须使用float属性来获得所需的结果：

<div class="dot" style="float: left"></div>

或者，您可以这样做：

<p>Chat Rooms <img src="link to your image" alt="altext" /> </p>

Answer 3

你可以这样做 -

<div><span style="float:left;">chat room</span> <span class="dot"></span>
<div style="clear:both;"></div></div>

Answer 4

如果我正确理解了您的问题，那么您的<div>会转到一个新行，因为默认情况下，div标签具有display: block;属性，该属性告诉他们，简单地说，他们可以自行行留下他们周围或下面的任何东西。

要解决此问题，您可以将以下CSS应用于您的文档：

.dot {
    display: inline;
}

将div的display属性设置为inline（并给它一个宽度和高度）应该允许它与周围的内容位于同一行。但是，我建议您使用<img>标记，该标记已经为您的案例提供了正确的行为。

有关<img>标记的参考，请访问此链接：
https://developer.mozilla.org/En/HTML/Element/Img