html - 如何实现float :right effect while preserving the inline-block display?

Question

考虑以下 jsFiddle:http://jsfiddle.net/mark69_fnd/yqdJG/1/

HTML:

<div id="container">
    <div class="char">
        AAA
    </div>
    <div class="char stickToRight">
        BBB
    </div>
</div>​

CSS:

#container {
    border:solid 2px green
}
.char { 
    display: inline-block;
    border: solid 2px red;
}
.stickToRight {
    float: right
}​

有没有另一种方法可以使 .stickToRight 右对齐，而不 float 它？

我需要将其保留为 display:inline-block 以便我可以使其垂直对齐方式与其他 .char 元素保持一致。

如何实现 float:right 右对齐效果，同时保持元素 display:inline-block？ (请注意，我不知道容器元素的宽度。)

我想要纯 CSS 解决方案，如果有的话。

Answer 1

我遇到了同样的问题，发现在容器上使用 direction: rtl; 是最好的解决方案。 https://css-tricks.com/almanac/properties/d/direction/