将div与无限高度水平对齐

Question

我想水平对齐3个或更多div元素，其中包含sub 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');
        }
    });
});

试试这个小提琴： https : //jsfiddle.net/j20ycsu0/1/