多个div - 水平滑出内容

Question

我整天都在盯着我的显示器，也许太长时间，当问题变得非常简单时，问题太复杂了。希望在这里的某个地方可以用数字方式打我，并指出我正确的方向。

三个元素向左浮动并且在容器内绝对定位。在每个元素的切换打开时，显示默认隐藏的sliderContent。点击后，被包围的元素被推到一边而不重叠。

代码：

<ul class="accordion">

<li class="item one">
    <div class="slideContent">
            Slider content
    </div>

</li>
<li class="item two">

     <div class="slideContent">
             Slider content
    </div>

</li>
<li class="item three">

     <div class="slideContent">
             Slider content
    </div>

</li>

 .accordion {
    list-style:none;
    position:relative;
}


 .item {
    width:25%;
    height:200px;
    background:#ccc;
    z-index: 0;
    margin-top: 10px;
    left: 0;
    position: absolute;
}

.slideContent {
    background:white;
    position:absolute;
    height:100%;
    width:100%;
 }

.one {
    background:black;
}
.two{
    background:green;
    left: 25%;
}
.three {
    background:blue;
    left:50%;
}
.four {
    left: 75%;
}

JS：

$('.slideContent').hide();


$('li.item').click(function(){
    $(this).css({zIndex: 9999}).animate({left:'0px', width: '100%'})
    $(this).$('.slideContent').show();
});

到目前为止小提琴：http://jsfiddle.net/ywL5n4w9/2/

为了帮助解释我制作了一张精美的图片。

希望这是有道理的，它可能是gobbledegook，因此我责怪11 +杯咖啡。

Answer 1

您的物品绝对定位，这大致意味着它们无法影响其他元素，包括将它们推到一边。

如果您将.item从position:absolute更改为float:left，并从position:absolute移除.slideContent，则似乎有效。

新jsfiddle here