Question

如何使outside div始终位于当前item div下方。代码工作正常，但如果它有两行，如下图所示。

如果点击box6或box7，外部div将位于顶部。如果有办法让outside div动态改变位置？

enter image description here

<div class="container">
    <div class="item" data-content="1">1
    </div>
    <div class="item" data-content="2">2
    </div>
    <div class="item" data-content="3">3
    </div>
       <div class="outside">
       </div>
</div>



.outside {
    background:yellow;
    background: #222222;
    float: left;
    display: none;
    position: absolute;
    top:80px;
    width:100%;
    color:white;
    font-size:20px;
    height: 300px;
}

在线示例http://jsfiddle.net/nm3Y4/

非常感谢您的答案和时间。我想我没有说清楚，所以我想要实现的是，如果你点击box1，应该如下图所示

enter image description here

当点击box6或box7时应如下所示 enter image description here

这意味着outside低于当前item div

再次感谢

Answer 1

您可以根据top框的高度和顶部更改绝对定位的.outside元素的.item属性值当前点击项目的偏移量：

$('.item').click(function(event) {
    var $this = $(this);
    var contentNumber = $this.data("content");

    $('.active').removeClass('active');
    $this.addClass("active");

    $('.content').hide();
    $('.content'+contentNumber).show();
    $('.outside')
        .css('top', $(this).offset().top + $(this).height() + 'px')
        .slideDown();     
});

<强> UPDATED DEMO

作为旁注：最好将.outside元素放在相对于.container而不是初始包含块的位置。

.container {
     /* Create a containing block for the absolutely positioned elements */
    position: relative;
}

同样float: left;声明对.outside来说是多余的，因为它绝对定位。

根据您的更新，您可以relative定位并添加top属性，以便定位项（其顶部偏移是触发点击事件时，高于当前点击的项：

.item {
    /* other styles here... */
    float:left;
    position: relative; /* Position the items relatively */
}

$('.item').click(function(event) {
    var $this = $(this);
    // ...
    $('.item').filter(function() {
        return $(this).offset().top > $this.offset().top;
    }).css('top', $('.outside').height() + 'px');
    // ...   
});

然后在.outside关闭时重置其位置：

$('.close').click(function(){
    $('.item').css('top', '0'); // reset the top property/value
    $('.outside').slideUp();
    $('.active').removeClass('active');
});

<强> UPDATED DEMO

Answer 2

删除position:absolute和top:80px并添加clear:both;

.outside {
    background:yellow;
    background: #222222;
    clear:both;
    display: none;


    width:100%;
    color:white;
    font-size:20px;
    height: 300px;
}

DEMO

Answer 3

自问题更新以来，这个答案不适合需要，我把它留在这里只是因为它显示了绝对元素的行为，如果没有给出coordonates ......

你可以重置白色空间而不是浮动div以使它们保持在1行。 http://jsfiddle.net/nm3Y4/7/

.slider {
    margin: 10px 0;
    width: 580px;
    height: 250px;
    position: relative;
    overflow: hidden;
}
.slider li {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
.item {
    width: 60px;
    height: 60px;
    display:inline-block;
    background:red;
    margin:10px;
    cursor: pointer;
}
.content {
    display:none;
}
.active {
    background:blue;
}
.outside {
    background:yellow;
    background: #222222;
    float: left;
    display: none;
    position: absolute;
    top:80px;
    width:100%;
    color:white;
    font-size:20px;
    height: 300px;
}
.close {
    float:right;
    cursor: pointer;
    margin-right:10px;
}
.container {
    white-space:nowrap;
}
.outside {
    white-space:normal;
}

或者不要让你的盒子浮动，内联块就可以了，删除顶部的coordonates，请参阅： http://jsfiddle.net/nm3Y4/9/

如何使扩展幻灯片始终在div下

3 个答案: