javascript - 水平对齐 div 无限高

Question

我想水平对齐 3 个或更多 div 元素，并且高度无限大，包含子 div。

 <div class ="container">
  <div class ="left">//sub divs</div>
  <div class ="center">// some random number of sub divs</div>
  <div class ="right"> // sub divs here</div>
</div>

.container { 
    width: 80%;
} 
.left, .right { 
    width: 50%;
}

现在 center 完全可见，left、right 分别可见 200px。当我单击 center 或 left 时，right div 应该滑动到 center 移动相应的 div 放在一边，应该是完全可见的。

我怎样才能实现这个设计？

Answer 1

HTML

<div class ="container">
    <div class="left">ONE</div>
    <div class="center">TWO</div>
    <div class="right">THREE</div>
</div>

CSS

.container {
    position: relative;
    height: 200px;
    width: 100%;
    border: 2px #000 solid;
    font-size: 0;
    transition: all .3s;
}

.container > div {
    position: absolute;
    top: 0; bottom: 0;
    font-size: 16px;
    cursor: pointer;
}

.left {
    left: 0;
    width: 20%;
    background-color: #8FB8ED;
}

.right {
    right: 0;
    width: 20%;
    background-color: #8FB8ED;
}

.center {
    left: 20%;
    width: 60%;
    background-color: #3590F3;
}

JS/JQuery

$(document).ready(function() {
    $('.container > div').on('click', function() {
        var pos = $(this).attr('class');
        if (pos !== 'center') {
            $(this).closest('.container').find('.center')
                .removeClass('center')
                .addClass(pos);
            $(this).removeClass(pos).addClass('center');
        }
    });
});

试试这个 fiddle :https://jsfiddle.net/j20ycsu0/1/