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

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

Answer 2

试试这个：

.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 3

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

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

3 个答案: