Question

我正在写聊天，我希望收到的消息在右侧，而传出消息在左侧。每条消息都有用户图片，名称，消息，时间。我的问题是我无法让文字不在图片下面流动。

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

谢谢！

Answer 1

.messagetext{
    display:inline-block;
 }
.incomingMessage img{float:right;}
.outgoingMessage img{float:left;}

这应该让你去。现在你只需要调整那个图像，我不确定你是想要它在顶部还是底部，什么不是。

http://jsfiddle.net/4MVd2/10/

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

Answer 2

抱歉，我完全错过了关于css的问题float: right，因为图片应该修复它。 http://jsfiddle.net/4MVd2/8/

Answer 3

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

.message img {
    height: 40px;
    width: 40px;
    display: block;
}

.incomingMessage img {
    float:right;
    margin: 0 0 3em 0.8em;
}

.outgoingMessage img {
    float:left;
    margin: 0 0.8em 3em 0;
}

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

Answer 4

我同意Chris Sobolewski并且学会了如何使用他的inline-block。我以前使用的一种方法是使用名为`clearfix'的类。

首先像这样漂浮您的图像：

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

然后像这样添加一个clearfix类：<div class="message incomingMessage clearfix">

这是clearfix：

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

避免文字在图片周围流动

4 个答案: