设置绝对位置

Question

我正在使用滑块的jQuery插件。它一次显示3个项目，并将类slick-active添加到活动项目。

我想只显示中间的项目为全宽，但要显示只有50％的第一项和最后一项，如图所示如下图：

为此，我想设置50％的绝对位置，但似乎并不奏效。我无法弄清楚如何设置位置来获得上述结果。

这就是我想：

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

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

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

Answer 1

添加以下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

Answer 2

试试这个， 使用的位置是：相对的而不是绝对的。并提供固定的价值而不是百分比。

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

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

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