2

我正在尝试将 div 彼此相邻放置，其中 div 使用 position:absolute 和 bottom: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 包装在一个主要的粘性页脚中并设置一个 float:left 以便它们彼此相邻放置。在实际示例中，position:absolute 和bottom:0 是动态设置的。更新小提琴：http: //jsfiddle.net/u2nda/

4

4 回答 4

3

您可以有一个空的页脚 div，在其中附加要最小化的 div。然后，您只需将位置设置为相对，将 div 向左浮动并将顶部和左侧重置为 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/

于 2011-12-24T00:39:35.053 回答
0

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

于 2011-12-23T23:24:26.887 回答
0

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

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

于 2011-12-23T23:27:55.570 回答
0

我认为最好的选择是包装你的“粘性”div。在 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;}
于 2011-12-23T23:30:09.220 回答