html – 如何实现float：正确的效果,同时保留inline-block显示？

概述考虑下面的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： 考虑下面的Jsfiddle： http://jsfiddle.net/mark69_fnd/yqdJG/1/

HTML：

<div ID="container">    <div >        AAA    </div>    <div >        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中非常好地描述的相当一套规则确定：“最终指南”，但是这基本上归结为“如果没有浮动就会出现的内联框的顶部”。

我仍然不太确定你想要的是什么视觉效果，当你想要元素浮动和嵌入在同一时间，但浮动布局是不同的在线框布局水平和垂直立场，没有任何办法结合起来。

总结

以上是内存溢出为你收集整理的html – 如何实现float：正确的效果,同时保留inline-block显示？全部内容，希望文章能够帮你解决html – 如何实现float：正确的效果,同时保留inline-block显示？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。