Выравнивать divs горизонтально с бесконечной высотой

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/