html - 右侧对齐不浮动

Question

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

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

我希望它也能够附加 div，这将导致溢出-y 创建一个滚动条。没有浮动的哪个已经按预期工作了。

以下是 jsbin 中的当前版本。

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

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

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在用户消息上使用并在每个消息之后放置一个 clearfix div：

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;
}

Answer 3

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

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

全部在父成员中；