CSS属性float的问题

Question

这些是我正在使用的代码：http://jsfiddle.net/VaKSG/

.brs_top_bar{
    width: 900px;
    height: 40px;
    background: rgb(27, 124, 124);
    border-bottom: 1px solid rgb(20, 92, 92);
    color: white;
}
.brs_top_search{
    width: 201px;
    height: 40px;
    background: rgb(22, 105, 105);
    display: inline-block;
}
.brs_top_show_hide{
    height: 40px;
    width: 10px;
    background: rgb(78, 218, 218);
    display: inline-block;
}
.brs_top_pages_info{
    color: white;
    font-weight: bold;
    display: inline-block;
    line-height: 30px;
    vertical-align: top;
}
.brs_top_pages_but{
    text-decoration: none;
    color: white;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    height: 28px;
    width: 28px;
    background: rgb(35, 156, 156);
    border: 1px solid rgb(31, 139, 139);
    display: inline-block;
 }
 .brs_top_pages{
    margin: 5px;
    height: 30px;
    display: inline-block;
    vertical-align: top;
 }
.floating{
    float: right;
    position: relative;
 }

---

<div class="brs_top_bar">
    <div class="brs_top_search"></div>
    <div class="brs_top_show_hide"></div>
    <div class="brs_top_pages floating">
        <div class="brs_top_pages_info">1 - 10 of 300</div>
        <a href="" title="" class="brs_top_pages_but"><</a><a href="" class="brs_top_pages_but" title="">></a>
    </div>
</div>

它在链接中运行正常，但在我的本地环境中，浮动元素位于同一容器中的其他元素下，如图所示：

我几乎尝试了一切，但是没有用。我正在使用Chrome。

Answer 1

尝试下面的css代码。只需在两个类中添加float:left。

.brs_top_search{
    width: 201px;
    height: 40px;
    background: rgb(22, 105, 105);
    display: inline-block;
    float: left;
}
.brs_top_show_hide{
    height: 40px;
    width: 10px;
    background: rgb(78, 218, 218);
    display: inline-block;
    float: left;
}