目的是让几个元素能够并排显示，方式有三种（参考链接：css如何让两个div并列在同一行）：
- 使用display的inline属性
- 通过设置float来让Div并排显示
- 对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面
float的使用
首先可以看一下float的相关的解释，有助于对float的使用。可以参考经验分享：CSS浮动(float,clear)通俗讲解
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
div,
span {
display: inline-block;
}
.span2 {
float: right
}
</style>
</head>
<body>
<div style="height: 40px; 80px;background-color: red">
div1
</div>
<span style="height: 40px; 70px;background-color:blue">
span1
</span>
<span class="span2" style="height: 40px; 70px;background-color:grey">
span2
</span>
</body>
</html>
输出结果：
div1 span1 span2
实战经验
BJUI框架中，两个span用了上述的方式没有并排。具体代码，就不展示了。总之，就是两个span或者两个div在某些场景下，设置上述float的属性没生效。
<!-- 实际代码，比这个复杂多了，但是大致结构如下 -->
<div>
<span style="float:right">
ss
</span>
<span style="float:right">
aa
</span>
</div>
原因：具体原因，没有进一步确认分析。但可以初步猜测，是框架初始化渲染的时候，导致这些属性失效了。
方案：如果这一层失效了，可以再抽象一层，排除当前层的影响
<!-- 实际代码，比这个复杂多了，但是大致结构如下 -->
<div>
<div style="float:right">
<span >
ss
</span>
</div>
<div style="float:right">
<span >
aa
</span>
</div>
</div>
display也遇到同样的问题
- css-display-inline
- 拜拜了,浮动布局-基于display:inline-block的列表布局
- display:inline-block带来的问题及解决办法
- display:inline、block、inline-block的区别