jquery - 单击对象展开，将下一个 float 对象移到视口(viewport)外(而不是下方)

Question

假设我在一个容器中有 3 个方 block ，彼此相邻，每个方 block 占视口(viewport)的 33.33%。当我单击其中一个时，那个将扩展到整个视口(viewport)宽度并显示隐藏的内容，而其他的则留在那个旁边，但现在出现在视口(viewport)之外。容器应该可以水平滚动，这样您仍然可以访问其他容器。

我目前可以展开其中一个方 block ，但其他两个方 block 会自动移到它下面，而不是旁边。

我将如何实现这一点？

演示:http://jsfiddle.net/7pg0buL8/

<div class="container">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
</div>

.container {
    width:450px;
    height:150px;
    border: 1px solid blue;
    overflow-x: scroll;
    overflow-y: hidden;
}

.tile {
    width:150px;
    height:150px;
    border:1px solid red;
    box-sizing: border-box;
    transition: width .5s;
    float:left;
    background-color:green;
}

.tile.expanded {
    width:100%;
}

$(function () {
    $('.tile').click(function () {
        $('.tile.expanded').removeClass('expanded');
        $(this).addClass('expanded');
    });
});

Answer 1

用简单的规则 nowrap 试试这个

CSS

.container {
    width:450px;
    height:150px;
    border: 1px solid blue;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;

}

.tile {
    width:150px;
    height:150px;
    border:1px solid red;
    box-sizing: border-box;
    transition: width .5s;
    background-color:green;
    position: relative;
    display: inline-block;
}

.tile.expanded {
    width:100%;
}

DEMO HERE