2

position:absolute と bottom:0 を使用して、div がスティッキー フッターのように機能する div を隣り合わせに配置しようとしています。

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をリセットする必要がなくなります。topleft

$(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; }. 3 番目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 に答える