Html 右侧对齐无浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16278114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right Side align without float
提问by zmanc
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.
我有一个聊天小部件，我正在为其添加一些样式。但是，我很难使“用户”聊天气泡与屏幕右侧对齐。
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 不再正确定位，因为它们似乎只是转到相关 div 的右侧。
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.
我希望它也能够附加会导致溢出-y 创建滚动条的 div。没有浮动已经按预期工作。
Below is the current version in a jsbin.
以下是 jsbin 中的当前版本。
http://jsbin.com/utulay/1/edit
http://jsbin.com/utulay/1/edit
TLDR; trying to get the .chat-bubble-user divs to align to right of screen without float.
TLDR；试图让 .chat-bubble-user div 在没有浮动的情况下与屏幕右侧对齐。
回答by Fabrizio Calderan
if you don't want use floats, just try with inline-block, like so:
如果您不想使用浮点数，请尝试使用inline-block，如下所示：
#chatWindow {
text-align: right;
}
.chat-bubble-user {
display: inline-block;
text-align: left;
}
JsBin (tested on Fx20): http://jsbin.com/awimev/2/edit
JsBin（在 Fx20 上测试）：http://jsbin.com/awimev/2/edit
回答by martincarlin87
You can use float:righton the user messages and put a clearfix divafter each one:
您可以float:right在用户消息上使用并div在每个消息后放置一个 clearfix ：
http://jsbin.com/utulay/2/edit
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
CSS
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
回答by Kondas Lamar Jnr
it has been a problem for sometime until. You only have to use
一段时间以来，这一直是一个问题。你只需要使用
text-align:right;
display-inline:block;
all in the parent member;
都在父成员中；
