Question

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

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

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

以下是jsbin中的当前版本。

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，并在每个消息后添加一个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;

所有在父成员中;

右侧对齐没有浮动

3 个答案: