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

前端之家收集整理的这篇文章主要介绍了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:

#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相关文章