设置绝对位置

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

试试这个， 使用position：relative而不是absolute。并提供固定价值而非百分比。

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

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

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