如何实现浮动:保持内联块显示的正确效果？

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可以正确对齐,而不是浮动它？

我需要保持它,display:inline-block以便我可以使其垂直对齐与其他.char元素一致.

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

我想要纯粹的CSS解决方案,如果有的话.

Answer 1

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

Answer 2

元素不能同时inline-block浮动.

当元素设置inline-block为时,它与display:inline元素的不同之处在于它可以指定宽度和高度.但是,它仍然是内联布局流程的一部分 - 其水平位置由其源顺序和text-align其块级父级的属性决定,其与行的垂直位置由vertical-align属性确定.

当元素浮动时,它不再是内联布局流程的一部分.它的水平位置是无论是浮动的决定left或right,以及是否有收到其他浮动元素,它的垂直位置由相当复杂的一套规则,埃里克迈耶描述真的很好在确定CSS:权威指南,但基本上归结为"内嵌盒的顶部,如果没有浮动它将出现在其中".

当你说你希望元素浮动inline-block同时,我仍然不太确定你想象的视觉效果,但浮动inline-block布局在水平和垂直位置方面与布局不同,并且没有任何方式来组合它们.

Answer 3

由于inline元素不能float，我们不能构建一些复杂的布局。然后flexbox被引入，现在我们有一个强大的技术可以解决大多数布局问题。要达到您的预期结果，只需这样做：

#container {
  border: solid 2px green;
  display: flex;
}

.char {
  border: solid 2px red;
  ;
}

.float-right {
  margin-left: auto;
}

<div id="container">
  <div class="char ">
    AAA
  </div>
  <div class="char float-right">
    BBB
  </div>
</div>

Answer 4

应用于text-align: right父div