0

подскажите, пожалуйста, как сделать так, чтобы при добавлении нового div сверху, старые передвигались вниз. Например, как на YouTube, при выкладывании нового видео, в списке оно становится первым, а остальные съезжают вниз. Код приложен.

.one {
  position: absolute;
  top: 60px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.two {
  position: absolute;
  top: 249px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.three {
  position: absolute;
  top: 438px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.four {
  position: absolute;
  top: 627px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.five {
  position: absolute;
  top: 816px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.six {
  position: absolute;
  top: 1005px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.seven {
  position: absolute;
  top: 1194px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.eight {
  position: absolute;
  top: 1383px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.nine {
  position: absolute;
  top: 1572px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.ten {
  position: absolute;
  top: 1761px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.eleven {
  position: absolute;
  top: 1950px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}

.twelve {
  position: absolute;
  top: 2139px;
  left: -30px;
  width: 100%;
  height: auto;
  width: 19em;
  display: block;
  height: 0;
}
<div class="container">
  <div class="one">
    <p>
      <a href="notes/10-maloizvestnykh-faktov-o-lune.php"><img id "icon" src="http://localhost/images/notes/10-maloizvestnykh-faktov-o-lune.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="two">
    <p>
      <a href="notes/2.php"><img id "icon" src="http://localhost/images/notes/two.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="three">
    <p>
      <a href="notes/3.php"><img id "icon" src="http://localhost/images/notes/three.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="four">
    <p>
      <a href="notes/4.php"><img id "icon" src="http://localhost/images/notes/four.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="five">
    <p>
      <a href="notes/5.php"><img id "icon" src="http://localhost/images/notes/five.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="six">
    <p>
      <a href="notes/6.php"><img id "icon" src="http://localhost/images/notes/six.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="seven">
    <p>
      <a href="notes/7.php"><img id "icon" src="http://localhost/images/notes/seven.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="eight">
    <p>
      <a href="notes/8.php"><img id "icon" src="http://localhost/images/notes/eight.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="nine">
    <p>
      <a href="notes/9.php"><img id "icon" src="http://localhost/images/notes/nine.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="ten">
    <p>
      <a href="notes/10.php"><img id "icon" src="http://localhost/images/notes/ten.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="eleven">
    <p>
      <a href="notes/11.php"><img id "icon" src="http://localhost/images/notes/eleven.jpg" width="310" height="185"></a>
    </p>
  </div>
  <div class="twelve">
    <p>
      <a href="notes/12.php"><img id "icon" src="http://localhost/images/notes/twelve.jpg" width="310" height="185"></a>
    </p>
  </div>
</div>

10
  • Нет, обычным способом 30 дек 2018 в 13:30
  • <a href="notes/1.php"> 30 дек 2018 в 13:31
  • И пользователь просто переходит туда и видит статью 30 дек 2018 в 13:32
  • Каждая статья - просто страница 30 дек 2018 в 13:33
  • 1
    Зачем вы используете абсолютное позиционирование? Что вам мешает просто добавлять новый блок в начало?
    – E_K
    30 дек 2018 в 16:49

2 ответа 2

1

Так можно сдвинуть через классы имеющиеся на странице элементы, но для этого вам нужно будет будет создать еще классы для новых постов.

$('.container>div').each(function(){
  var cl=$(this).next().attr('class');
  $(this).attr('class',cl);
});
5
  • Можно, пожалуйста, поподробнее. Я просто новичок. Куда этот код вставлять? Как использовать? 30 дек 2018 в 14:59
  • Вы сначала определитесь, что будет конкретно происходить на странице после добавления нового поста? Куда будут деваться старые посты, которые в самом низу? 30 дек 2018 в 15:17
  • Они будут сдвигаться ещё ниже 30 дек 2018 в 15:21
  • Тогда вам желательно css переписать, потому что оно нерационально составлено. Слишком много дублирующегося кода. Создайте общий класс для всех постов, а потом используя js меняйте только параметр top 30 дек 2018 в 15:23
  • Это то я создам, но вот можно ли изменение top довести до автоматизма? 30 дек 2018 в 15:27
0
$('.container').prepend('<div class="one"> ... </div>')
0

Ваш ответ

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

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