跨越容器宽度的重叠内联元素

Question

我正在尝试创建一个 "bookshelf" 风格的导航，在响应式容器中包含重叠元素。书籍数量需要是动态的，我需要它们的间距基于容器宽度，以及要为每本书创建和偏移的书籍数量，直到它填满容器。

我已经设置了一些 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

跨越容器宽度的重叠内联元素

Overlapping inline elements that span container width

css

navigation

jquery