Question

这是一个jsfiddle示例：http://jsfiddle.net/72Hf2/

在此示例中，div#reference宽度为500px ... div#carousel扩展为使用该值。

问题是每个div.slide之间没有间距。向div.slide添加任何填充/边距会破坏轮播，因此我在每个div.thumbnail内插入div.slide并在其中应用了我的边距，如下所示：http://jsfiddle.net/c34CF/1/ < / p>

然而，最后留下了一个空白。我必须在最后没有差距..但是我不能简单地使用:last-child，因为最后一个可见幻灯片不是DOM中的最后一个元素。如何在没有间隙问题的情况下实现幻灯片之间的间距？

根据我的理解，最好的方法是在div#carousel上应用负左/右边距，然后应用正左和右边距。每个div.slide上的右边距，它在jsFiddle中工作，但它会搞砸实际的轮播（JS代码假定div#wrapper是div.slide的宽度的精确总和）...我需要分叉那个旋转木马吗？改变它的工作方式，或者CSS中有解决方法吗？

Answer 1

您可以使用http://jsfiddle.net/c34CF/6/中所见的第n个子CSS选择器来执行此操作

DIV:nth-child(6) > .thumbnail{

        margin-right:0 !important;
    }

但是我想，你可能需要一些不同大小的旋转木马动态

如果是这种情况，请尝试以下帮助：

如果您使用的是jQuery： $（“。thumbnail＆gt;：nth-child（eqn）”）。css（“margin-right”，0）; //这里“eqn”应该是一个表达式，可以帮助您访问轮播中显示的最后一个缩略图索引。

如果您不使用jQuery，请尝试使用基本的javascript使用第n个子选择器属性。

希望这有帮助。

Answer 2

您可以使用:last-child而不是使用:first-child并将保证金权利交换为保证金左边

这将是这样的：

.thumbnail {
    border:1px red solid;
    margin-left:15px;
}

.slide:first-child .thumbnail {
    margin-left: 0;
}

如果您不必担心IE7或更低版本，可以通过将.thumbnail属性设置为box-sizing来跳过添加border-box altogther。

.slide {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    /* not sure if the prefixes are still needed */
    margin-left: 15px;
}

.slide:first-child{
    margin-left: 0;
}

Box-sizing控制边距和填充如何影响元素的宽度。默认值为content-box，它的工作方式与您习惯的方式相同：元素具有宽度，例如100px，边距和填充延伸。因此，如果你有10px的边距和5px的填充，你的宽度+边距+填充将等于130。

将属性设置为border-box时，宽度包括边距和填充。所以100px宽度+ 10px + 5px填充的总宽度为... 100px！换句话说，边距和填充会压缩内容而不是向外推出更多空间。 Chris Coyier是great article和an example，可以看到它的实际效果。

编辑：使用:first-child小提琴：http://jsfiddle.net/Ws4UQ/2/

相关代码：

#wrapper {
    position:relative;
    left:0;
    width:1300px;
    margin-left:-115px; /* This is the width + margin of .slide */
}

.slide {
    width:100px;
    float:left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;    /* not sure if the prefixes are still needed */
    margin-left: 15px;
}

.slide:first-child {
    margin-left: 0;
}

滑动旋转木马时需要考虑边距（#wrapper）。而不是将它移动-100px，它将是-115px（额外的15px是你设置边距的任何东西）。只要知道如果你需要它在IE8中工作，你就必须创建一个polyfill（more info from Chris again）。

在转盘上的幻灯片之间插入边距/填充

2 个答案: