右侧对齐没有浮动

Question

我有一个聊天小部件,我正在添加一些样式.但是,我很难让"用户"聊天气泡对齐到屏幕右侧.

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

我希望它能够附加将导致overflow-y创建滚动条的div.没有浮动的东西已经按预期工作了.

以下是jsbin中的当前版本.

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

TLDR; 试图让.chat-bubble-user divs在没有浮动的情况下与屏幕右侧对齐.

Answer 1

如果您不想使用浮动,请尝试使用inline-block,如下所示:

#chatWindow {
   text-align: right;
}

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

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

Answer 2

您可以float:right在用户消息上使用并div在每条消息后放置一个clearfix ：

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

<div class="chat-bubble-user">
    <div class="chat-bubble-glare-user"></div>
    <p>I have a question about kittens?</p>
    <div class="chat-bubble-arrow-border-user"></div>
    <div class="chat-bubble-arrow-user"></div>
 </div>
<div class="clearfix"></div>

的CSS

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