Question

我正在尝试将div放在彼此旁边，其中div使用位置就像一个粘性页脚：绝对和底部：0

HTML：（note that I could have many of these with different id but the same class）

<div id="s6234" class="sticky">
    <div id="s_content">
    Hello
    </div>
</div>


<div id="s7243" class="sticky">
    <div id="s_content">
    Hello
    </div>
</div>

CSS：

.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}

jsFiddle：http://jsfiddle.net/ZqaDe/

预览：http://jsfiddle.net/ZqaDe/show

修改我不知道每次有多少div。那里的div是动态附加的。在实际的应用程序中，可以删除，移动或添加这些div，以便它们每次都会不断变化。所以基本上我想要一种方法，以便每次都放在彼此旁边。

编辑2： 我不认为我能够将所有div包裹在一个主粘性页脚内并设置一个浮动：左边以便它们彼此相邻放置。在实际示例中，位置：绝对和bottoom：0动态设置。 更新了小提琴：http://jsfiddle.net/u2nda/

Answer 1

你可以有一个空的页脚div，你可以在其中追加你最小化的div。然后你只需要将位置设置为relative，将div向左浮动并将top和left重置为0.

所以你的JQuery字符串会变成：

$(this).parent().parent().appendTo("#footer")
                         .css('position','relative')
                         .css('float','left')
                         .css('height','45')
                         .css('top','0')
                         .css('left','0')
                         .find('#s_content').hide();

JSFiddle：http://jsfiddle.net/u2nda/2/

修改

或者更好的是，将position更改为static，这样您就无需重置top和left值：

$(this).parent().parent().appendTo("#footer")
                         .css('position','static')
                         .css('float','left')
                         .css('height','45')
                         .find('#s_content').hide();

JSFiddle：http://jsfiddle.net/u2nda/3/

编辑2

甚至更好，只需附加不会覆盖内联CSS的类：

.tabMe {
    float: left;
    height: 45px;
    position: static;
}

.tabMe #s_head{
    border: 0;
}

.tabMe #s_content{
    display: none;
}

你的JQuery显示/隐藏可能会变成：

$('#s_head button').on('click', function(){
    var check = $(this).parent().parent();
    if( !check.hasClass("tabMe"))
        check.appendTo("#footer").addClass("tabMe")
    else
        check.appendTo("body").removeClass("tabMe")                         
});

JSFiddle：http://jsfiddle.net/u2nda/4/

Answer 2

您只需将第二个div移到右侧：#s7243 { left: 200px; }。如果您有第三个div，则需要将其移动更多：#third-one { left: 400px; }。

Answer 3

我会将div放在一个主容器中，这个容器的位置是绝对的，然后浮动你的块。

示例http://jsfiddle.net/ZqaDe/3/

Answer 4

我认为最好的选择是包装你的“粘性”div。见my demo on jsfiddle

<div class="sticky">
 <div id="s6234" class="left">
    <div id="s_content">
    Hello
    </div>
 </div>


 <div id="s7243" class="left">
    <div id="s_content">
    Hello
    </div>
 </div>
</div>

CSS：

.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}

底部时如何将粘性页脚div放在一起：0是动态设置的

4 个答案:

修改

编辑2