Javascript 如何使展开幻灯片始终位于div下

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

如果单击box6或box7，则外部div将位于顶部。如果有什么方法可以让外部div动态改变位置

<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;
}

在线样品

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

当点击box6或box7时，显示如下

这意味着在当前项目div下面的外部

再次感谢

删除位置：绝对和顶部：80px，添加清晰：两者

移除位置：绝对和顶部：80px，添加清除：两者

---

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

$('.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();     
});

作为旁注：最好相对于.container定位.outside元素，而不是初始包含块

.集装箱{ /*为绝对定位的图元创建包含块*/ 位置：相对位置； } 也浮动：左；声明对于.outside是多余的，因为它是绝对定位的

根据您的更新，您可以相对定位并添加top属性，以便在触发单击事件时定位其顶部偏移高于当前单击项目的项目：

.项目{ /*这里还有其他款式*/ 浮动：左； 位置：相对；/*相对定位项目*/ } $'.item'。单击函数事件{ var$this=$this； // ... $'.item'.filterfunction{ 返回$this.offset.top>$this.offset.top； }.css'top'，$'。外部'.height+'px'； // ... }; 然后在外部关闭时重置其位置：

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

---

.

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

$('.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();     
});

作为旁注：最好相对于.container定位.outside元素，而不是初始包含块

.集装箱{ /*为绝对定位的图元创建包含块*/ 位置：相对位置； } 也浮动：左；声明对于.outside是多余的，因为它是绝对定位的

根据您的更新，您可以相对定位并添加top属性，以便在触发单击事件时定位其顶部偏移高于当前单击项目的项目：

.项目{ /*这里还有其他款式*/ 浮动：左； 位置：相对；/*相对定位项目*/ } $'.item'。单击函数事件{ var$this=$this； // ... $'.item'.filterfunction{ 返回$this.offset.top>$this.offset.top； }.css'top'，$'。外部'.height+'px'； // ... }; 然后在外部关闭时重置其位置：

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

.

由于问题已更新，此答案不符合需要， 我把它放在这里只是因为它显示了绝对元素的行为，若并没有给出坐标

您可以重置空白，而不浮动div以使其保持在一行。

或者不要让方框浮动，内联块就可以了，移除顶部坐标，请参见：

由于问题已更新，此答案不符合需要， 我把它放在这里只是因为它显示了绝对元素的行为，若并没有给出坐标

您可以重置空白，而不浮动div以使其保持在一行。

---

或者不要让方框浮动，内联块很好，移除顶部坐标，请参见：

它与item div重叠，而我的答案不重叠t@SajadLfc我认为OP希望相对于当前单击的项目定位.outside，而不是通常位于容器框下方。如果是这样，他/她可以从外部删除绝对：位置，并添加清晰：两者；为了将浮动清除为：不幸的是，一旦单击第一行项目，就无法在第二行看到任何项目（如果有的话）。。。除非你关上盒子。这对我们来说是显而易见的，但对lambda web用户来说这也是我的答案的要点，两个例子都有链接：@GCyrillus是的，我只是回答OP想要什么。不过，我最后的第二条评论在这种情况下会很有帮助。它与item div重叠，而我的答案没有重叠t@SajadLfc我认为OP希望将.outside相对于当前单击的项目放置在容器框下方。如果是这样，他/她可以从.outside中删除绝对：位置，然后添加clear:两者；为了将浮动清除为：不幸的是，一旦单击第一行项目，就无法在第二行看到任何项目（如果有的话）。。。除非你关上盒子。这对我们来说是显而易见的，但对lambda web用户来说也是

---

我的答案与两个例子都有关联：@GCyrillus没错，我只是回答OP想要的。不过，我最后的第二条评论在这种情况下会很有帮助。Sajad，我认为在这种情况下，没有必要使用top属性，因为元素位于流中它的位置。也考虑清理物品的浮动。@ HasHyqoLAM:考虑！！！+！干得好。然而位置：相对；这里是多余的：@HashemQolami:忘了删除它。。！！但是已经从演示中删除了，现在从answer和demo中都删除了。。！！谢谢你的宝贵建议。。！！您可以只使用CSS，因为您的框有一个高度Sajad，我认为在这种情况下，没有必要使用top属性，因为元素位于流中它的位置。也考虑清理物品的浮动。@ HasHyqoLAM:考虑！！！+！干得好。然而位置：相对；这里是多余的：@HashemQolami:忘了删除它。。！！但是已经从演示中删除了，现在从answer和demo中都删除了。。！！谢谢你的宝贵建议。。！！您只能使用CSS，因为您的框有一个高度