Как разместить липкие нижние колонтитулы рядом друг с другом, когда bottom: 0 устанавливается динамически

Question

Я пытаюсь расположить элементы div рядом друг с другом, где элементы div действуют как колонтитул, используя позицию: 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

EDIT: Я не знаю, сколько дел каждый раз. Дивы там добавляются динамически. В реальном приложении эти div могут быть удалены, перемещены или добавлены, так что они будут меняться каждый раз. Так что в основном я хочу, чтобы каждый раз они располагались рядом друг с другом.

РЕДАКТИРОВАТЬ 2: Я не думаю, что смогу обернуть все div внутри основного липкого нижнего колонтитула и установить float: left, чтобы они располагались рядом друг с другом. В реальном примере позиция: абсолютная и нижняя: 0 устанавливается динамически . Обновленная скрипка: http://jsfiddle.net/u2nda/

Answer 1

У вас может быть пустой div нижнего колонтитула, в который вы добавляете div, который минимизируете.Затем вам просто нужно установить относительное положение, переместить 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/

Edit 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 в основной контейнер, в котором была моя абсолютная позиция, а затем разместил ваши блоки.

Пример http://jsfiddle.net/ZqaDe/3/

Answer 3

Я думаю, что лучшим вариантом будет завернуть ваши "липкие" 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;}

Answer 4

Вам просто нужно переместить второй div вправо: #s7243 { left: 200px; }.Если у вас был третий div, вам нужно было бы переместить его еще больше: #third-one { left: 400px; }.