0

В данном примере новы блоки дописывать в начале блока и отпускает их, а надо добавлять в самый конец и поднимать их вверх(привязка блоков к подвалу)

for (let i=1; i<10; i++) {
    setTimeout( function timer(){
        $('.id').prepend('<div class="ee">'+i+'</div>');
    }, i*1000 );
}
.id{
width:200px;
height:220px;
background:#464c74;
}
.ee{
width:160px;
height:20px;
margin-left:20px;
background:red;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="id"></div>

1
  • по тексту вопроса Вам нужно блоки ставить снизу вверх, а не сверху вниз как написано в заголовке
    – Alex
    22 ноя 2018 в 6:52

1 ответ 1

1

for (let i = 1; i < 10; i++) {
  setTimeout(function timer() {
    $('.id').prepend('<div class="ee">' + i + '</div>');
  }, i * 1000);
}
.id {
  width: 200px;
  height: 220px;
  background: #464c74;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
  -webkit-align-content: flex-end;
  -webkit-align-items: flex-end;
  flex-flow: row wrap;
  align-content: flex-end;
  align-items: flex-end;
}

.ee {
  width: 160px;
  height: 20px;
  margin-left: 20px;
  background: red;
  margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="id"></div>

6
  • для правильного результата тогда уж append вместо prepend 22 ноя 2018 в 13:15
  • @ДенисЛебедев можно и так. дело в том, что В вашем примере 10,9,8,7...1, а не 1,2,3,4...10, поэтому я посчитал, что Вам нужна такая же последовательность блоков.
    – Alex
    22 ноя 2018 в 14:07
  • спасибо большое, тут сложность возникла, если родитель больше по длине... они его пытаются заполнить в одну полосу, а надо в столбец 22 ноя 2018 в 15:18
  • @ДенисЛебедев сделайте пример на jsfiddle.net пожалуйста
    – Alex
    22 ноя 2018 в 15:27
  • jsfiddle.net/w6g4pcy5 прижать столбик к правому краю 22 ноя 2018 в 16:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.