右侧对齐，无浮动 [英] Right Side align without float

问题描述

我有一个聊天小部件，我添加了一些样式。但是，我无法使用户聊天气泡与屏幕右侧对齐。

I have a chat widget that I am adding some styling to. However I am having difficulty making the "user" chat bubbles align to the right of the screen.

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

When I use float right, with float left(for the other side) the divs no longer position correctly, in that they seem to just go to the right of the relative divs.

我想它也能够附加div，这将导致overflow-y创建一个滚动条。

I would like it to also be able to append div's that will cause the overflow-y to create a scroll bar. Which without the float is already working as expected.

下面是jsbin中的当前版本。

Below is the current version in a jsbin.

a href =http://jsbin.com/utulay/1/edit> http://jsbin.com/utulay/1/edit

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

TLDR;试图让.chat-bubble-user divs与屏幕右侧对齐而不浮动。

TLDR; trying to get the .chat-bubble-user divs to align to right of screen without float.

推荐答案

如果您不想使用浮动广告，只需尝试 inline-block ，像这样：

if you don't want use floats, just try with inline-block, like so:

#chatWindow {
   text-align: right;
}

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

JsBin（在Fx20上测试）：http://jsbin.com/awimev/2/edit

JsBin (tested on Fx20): http://jsbin.com/awimev/2/edit

这篇关于右侧对齐，无浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！