html - 右侧对齐无 float

Question

我有一个聊天小部件，我正在为其添加一些样式。但是，我很难让“用户”聊天气泡与屏幕右侧对齐。

当我使用向右浮动，向左浮动(另一侧)时，div 不再正确定位，因为它们似乎只是位于相关 div 的右侧。

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

下面是 jsbin 中的当前版本。

http://jsbin.com/utulay/1/edit

TLDR；试图让 .chat-bubble-user div 在没有 float 的情况下与屏幕右侧对齐。

Answer 1

如果您不想使用 float ，只需尝试使用 inline-block，如下所示:

#chatWindow {
   text-align: right;
}

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

JsBin(在 Fx20 上测试):http://jsbin.com/awimev/2/edit