Html 避免文字在图片周围流动

我正在写一篇聊天，我想把收到的信息放在右边，把发出的信息放在左边。每条消息都有用户图片、名称、消息和时间。 我的问题是，我无法使文本不在图片下流动

我的其他问题是，如何在不改变HTML中顺序的情况下从文本中获取右侧的图片，以及如何将用户名与图片顶部对齐

---

谢谢大家!

对不起，我完全错过了css上的问题

float:right

，因为图像应该修复它

对不起，我完全错过了css上的问题

float:right

，因为图像应该修复它

那会让你走的。现在你只需要调整一下图像，我不确定你是想要在顶部还是底部，还有什么不想要的

编辑：解决了您的图像定位问题，我第一次通读时没有看到这一点。这应该是你想要的

那会让你走的。现在你只需要调整一下图像，我不确定你是想要在顶部还是底部，还有什么不想要的

编辑：解决了您的图像定位问题，我第一次通读时没有看到这一点。这应该是您想要的。

1）您可能希望将图像转换为块级元素，并为它们提供足够高的底部边框，以防止文本从图像下方潜入（无论哪种方式，您都有固定的消息行高度）

2） 在该代码块周围添加一个包装容器，并将其浮动，而不是图像和消息内容。

1）您可能希望将图像转换为块级元素，并为其提供足够高的底部边框，以防止文本在图像下方潜行（无论哪种方式，您都有固定的消息行高度）

---

2） 在代码块周围添加一个包装容器，并将其浮动，而不是图像和消息内容。

我同意Chris Sobolewski的观点，并从他那里学会了如何使用

内联块。

我过去使用的一种方法是使用名为“clearfix”的类

首先，像这样浮动图像：

.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}​

然后添加一个类

clearfix

，如下所示：

下面是

clearfix

：

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

---

我同意Chris Sobolewski的观点，并从他那里学会了如何使用

内联块

首先，像这样浮动图像：

.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}​

然后添加一个类
clearfix
，如下所示：

下面是
clearfix
：

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

如果你觉得有用的话，我们可以随意投票；）但说真的，我很高兴你学到了一些新东西。内联块是一个非常强大的工具，现在IE6和IE7已经死了或几乎死了。嘿，谢谢你的帮助！最后一个问题：如何让“彼得”与图片处于同一高度。我浏览了代码，现在设置了任何边距/填充，这可能会导致偏移。如果您觉得有用，我们可以随意投票；）但说真的，我很高兴你学到了一些新东西。内联块是一个非常强大的工具，现在IE6和IE7已经死了或几乎死了。嘿，谢谢你的帮助！最后一个问题：如何让“彼得”与图片处于同一高度。我浏览了代码，现在设置了任何边距/填充，这可能会导致偏移。