考虑下面的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元素一致。
如何实现浮点数:右对齐效果,同时保持元素显示:inline-block? (请注意,我不知道容器元素的宽度。)
我想要纯粹的CSS解决方案,如果有的话。
解决方法
元素不能同时嵌入和浮动。
当元素设置为内联块时,它与显示不同:内联元素,它可以指定宽度和高度。然而,它仍然是内联布局流程的一部分 – 其水平位置由其源级别和其块级父级的text-align属性确定,并且其垂直位置与该行的垂直位置由vertical-align属性确定。
当元素浮动时,它不再是内联布局流程的一部分。它的水平位置是由左侧还是右侧浮动确定,以及是否还有其他浮动元素,其垂直位置由Eric Meyer在CSS中非常好地描述的相当一套规则确定:“最终指南”,但是这基本上归结为“如果没有浮动就会出现的内联框的顶部”。
我仍然不太确定你想要的是什么视觉效果,当你想要元素浮动和嵌入在同一时间,但浮动布局是不同的在线框布局水平和垂直立场,没有任何办法结合起来。