插入餘量/填充的幻燈片之間上的轉盤

Question

這裏是一個的jsfiddle例如：http://jsfiddle.net/72Hf2/

在這個例子中是div#reference寬500像素... div#carousel擴展到消耗這一點。

問題是每個div.slide之間沒有間距。添加任何填充/利潤率div.slide將打破旋轉木馬，所以我已插入div.thumbnail每個div.slide內，並有我的應用保證金，像這樣：http://jsfiddle.net/c34CF/1/

但是離開在最後的空白。我必須在最後沒有空白..但是我不能簡單地使用:last-child，因爲最後一個可見幻燈片不是DOM中的最後一個元素。如何在沒有間隙問題的情況下實現幻燈片之間的間距？

從我瞭解的最佳方式將是對div#carousel施加負左/右邊緣，然後將每個div.slide積極左&右頁邊距，這在的jsfiddle的作品，但它搞砸了實際的旋轉臺（該JS代碼假設div#wrapper是div.slide的寬度的確切總和）...我是否需要叉轉輪播&改變它的工作方式，或者有沒有在CSS中的解決方法？

Answer 1

可以使用第n個孩子CSS選擇器做在http://jsfiddle.net/c34CF/6/
​​
看到但是我想，您可能需要爲不同尺寸

的旋轉木馬的東西動態。如果是這樣的話，請嘗試以下幫助：

如果您使用jQuery： $（「。thumbnail>：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或更低版​​本，您可以通過將box-sizing屬性設置爲border-box來跳過添加.thumbnail 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; 
} 

框大小控制邊距和填充如何影響元素的寬度。默認值爲content-box，它的工作方式與以前一樣：一個元素有一個寬度，比如說100px，邊距和填充距離就是這個寬度。所以，如果你有10px的保證金和5像素填充你的寬度+保證金+填充將等於130

當屬性設置爲border-box，寬度包括 margin和padding。因此，100px寬度+ 10px + 5px填充將具有... 100px的總寬度！換句話說，邊距和填充會擠壓內容，而不是向外推動更多空間。克里斯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）時予以考慮。而不是將其移動-100像素，它將是-115像素（額外的15像素是無論您設置邊距）。只要知道，如果你需要它在IE8中工作，你將不得不創建一個polyfill（more info from Chris again）。