单击对象展开，将下一个浮动对象移到视口外（而不是下方）

Question

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

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

我该如何实现？

<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

试试这个：

.container {
   width:550px;
    height:150px;

    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:250px;
}

Answer 2

这里是容器固定 width 的解决方案：http://jsfiddle.net/7pg0buL8/4/

Answer 3

用简单的规则 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

单击对象展开，将下一个浮动对象移到视口外（而不是下方）

Click object to expand, moving next-floating objects outside viewport (instead of below)

jquery

css

viewport

expand