設置絕對位置

我正在使用滑塊的jQuery插件。它一次顯示3個項目，並將類slick-active添加到活動項目。設置絕對位置

我想只顯示中間的項目爲全寬，但要顯示只有50％的第一項和最後一項，如圖所示如下圖： enter image description here

爲此，我想設置50％的絕對位置，但似乎並不奏效。我無法弄清楚如何設置位置來獲得上述結果。

這就是我想：

.slick-active:first-child{ 
    position: absolute; 
    left: -50%; 
} 

.slick-active:last-child{ 
    position: absolute; 
    right: -50%; 
}

演示： http://jsfiddle.net/yu76xt4f/

來源

2014-09-22 user1355300

不能使用「width」屬性而不是左右。分別分配25％，50％和25％的寬度。 – 2014-09-22 08:58:20

@NishanSenevirathna我想只顯示實際圖像大小的50％，因此50％被截斷 – user1355300 2014-09-22 08:59:32

添加以下CSS，我不推薦。因爲它在使用!important。我正在使用!important來覆蓋插件提供的內聯樣式。

CSS

.slick-slide.slick-active{ 
    width: 100px !important; 
} 

.slick-slide.slick-active + .slick-slide.slick-active{ 
    width: 400px !important; 
} 

.slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active{ 
    width: 100px !important; 
}

Working Fiddle

來源

2014-09-22 09:01:10

我認爲user1355300只想顯示原始圖像的50％。但是，如果您將寬度設爲100像素，則會減少原始寬度。 – 2014-09-22 09:14:29

@NishanSenevirathna然後你可以使用'25％'，'50％'和'25％'..我會在有空的時候更新。 – 2014-09-22 09:32:43

試試這個，使用的位置是：相對的而不是絕對的。並提供固定的價值而不是百分比。

.slick-active:first-child{ 
    position: relative; 
    left: -50px; 
} 

.slick-active:last-child{ 
     position: relative; 
     left: -50px; 
} 

.slick-active { 
    position: relative; 
    left: -50px; 
}

來源

2014-09-22 09:11:55

設置絕對位置

回答

相關問題