Перекрывающиеся встроенные элементы, которые охватывают ширину контейнера

Question

Я пытаюсь создать навигацию стиля «книжная полка» с перекрывающимися элементами в гибком контейнере. Количество книг должно быть динамическим, мне нужно, чтобы их расстояние было основано на ширине контейнера и количестве книг для создания и смещения для каждой книги до тех пор, пока она не заполнит контейнер.

Я установил небольшой код-тест, и я очень близок, однако он не динамичен, и я не совсем добираюсь до самого дальнего края контейнера с помощью моего последнего элемента.

codepen

book.each(function (i) { 
    var num = i; 
    $(this).css({ 
     marginLeft: (num * (margin - 10)), 
     zIndex: (book.length) - num 
    }); 
}); 

Answer 1

Привет не уверен, но я надеюсь, что это было то, что вы имели в виду

book.each(function (i) { 
    var v = container.width(); 
    var w = book.width(); 
    var x = (book.length - 1); 
    var vw = ((v - w)/x); 
    var num = i; 
    $(this).css({ 
    left: (num * vw) + 'px', 
    zIndex: (x) - num 
    }); 
}); 

http://codepen.io/anon/pen/gbjRoW