叠加的 div 之间的间距，不影响宽度

Question

我最近一直在尝试制作 div 幻灯片，使用名为 Owl-Carousel 的脚本，其中 div 每个 spaced 10 px，因此拖动看起来不错。

为了展示目的，我制作了整个代码： http://codepen.io/anon/pen/VLZmWd

我尝试修改页边距但没有成功。

CSS如下：

.generic { // header on top of slide, must have wrapper width
  background-color:red;
  height: 30px;
  text-align:center;
}

.item { // item (slide) inside the owl carousel, must have wrapper width
  height: 300px;
  background-color: #7FFFD4;
  //margin-right:10px; // gives the spacing between slides, but works so bad
}

#wrapper { // wraps carousel and elements with generic class
  margin:0px auto;
  width:720px;
  height: auto;
}

我怎样才能 space 在彼此之间滑动 10px，同时保持 red/green 区域相同的宽度和 .generic class 不变。

我希望 class ".generic" 不变的原因主要是我整理代码的方式，因此 CSS 很容易修改宽度：我有许多不同的 classes/elements 应该采用包装宽度，我希望不必为它们中的每一个设置宽度或设置边距，以实现代码可管理性。

编辑：为了清楚起见，当在旋转木马上使用鼠标拖动时，我的 objective 是在每张幻灯片绿色幻灯片之间看到 10px 的白色（在 codepen 中不是这种情况），同时保持绿色区域宽度与红色区域宽度相同。

谢谢

Answer 1

您可以为您的 meow 应用边距并在它们周围添加一个容器，这使得它们小于容器的总大小，从而增加边距。 http://codepen.io/anon/pen/aOopOK

如果您不想更改 HTML，您也可以使用 box-sizing 来达到同样的效果。 http://codepen.io/anon/pen/QbLdbG

但是，我建议您自己开发此功能，不要使用 owl-carousel，尤其是如果您只是在学习 JS。这不是一个特别复杂的概念，尽管肯定超出了 Whosebug 答案的范围。

Answer 2

嗯...我想这就是你想要的：

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

$(document).ready(function() {
  $("#owl-demo").owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
    afterMove: function (elem) {

      var index = this.owl.currentItem;

     $('.owl-wrapper').css('margin-left',-10*(index)+'px')
    }

 });
});

要获得所需的行为，您必须移动容器 (.owl-wrapper) - 默认位置始终是 left:0，但是，因为我们想要边框 - 我们必须相应地移动它。在 CSS（如果我没记错的话:)），我刚刚添加了：

.owl-item {
   border-right:10px solid white; 


}

EDIT2：margin-left，而不是 left，现在应该适用于所有（现代）浏览器。 :)

叠加的 div 之间的间距，不影响宽度

Spacing between superposed divs, without affecting width

html

javascript

css

owl-carousel