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');
        }
    });
});

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

水平对齐div与无限高度

1 个答案: