Html 右侧对齐，无浮动

我有一个聊天小部件，我正在添加一些样式。然而，我很难让“用户”聊天泡泡对准屏幕右侧

当我使用float right时，float left（对于另一侧）的div不再正确定位，因为它们似乎只是在相对div的右侧

我希望它也能够附加div，这将导致overflow-y创建一个滚动条。在没有浮动的情况下，它已按预期工作

下面是jsbin中的当前版本

---

TLDR；正在尝试使.chat bubble用户div与屏幕右侧对齐而不带浮动

如果不想使用浮动，请尝试使用

内联块

，如下所示：

#chatWindow {
   text-align: right;
}

.chat-bubble-user {
   display: inline-block;
   text-align: left; 
}

---

JsBin（在Fx20上测试）：

您可以在用户消息上使用

float:right

，并在每个消息之后放置一个clearfix

div

：

---

这一直是一个问题，直到。 你只需要使用

text-align:right;
display-inline:block;

---

所有在父成员中

非常棒。谢谢大家!<代码>内联块将导致元素被视为文本。因此，字符之间的间距被添加，就好像整个元素只是普通文本一样。如果你的布局需要像素完美的定位，这是不可行的。太棒了。帮了我大忙先生你是个巫师，谢谢！

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

text-align:right;
display-inline:block;