Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нумерация по вертикали (https://javascript.ru/forum/dom-window/53374-numeraciya-po-vertikali.html)

apollo100 01.02.2015 10:29

Нумерация по вертикали
 
Вопрос как сделать автоматическую нумерацию по вертикали. То есть есть div контейнер, ширина 50px, высота не ограничена. Как сделать нумерацию автоматически, начиная с цифры 1, при этом можно было бы задать интервал между цифрами, вот так:

1

2

3

4

5

Буду очень благодарен за помощь.

Safort 01.02.2015 11:11

Выводи все эти дивы в цикле и ставь нужные номера.

apollo100 01.02.2015 11:26

как сделать цыкл ?

Safort 01.02.2015 11:36

apollo100,
например, с помощью инструкции for.

рони 01.02.2015 11:50

apollo100,
http://htmlbook.ru/html/ol

apollo100 01.02.2015 11:55

могли бы показать на примере

apollo100 01.02.2015 12:20

<div id="de">

<div id="as"> 1 </div>
<div id="as"> 2 </div>
<div id="as"> 3</div>
<div id="as"> 4</div>
<div id="as"> 5 </div>
<div id="as"> 6 </div>
<div id="as"> 7 </div>


</div>

То есть чтоб добавлялось по высоте контейнера столько сколько нужно

ksa 01.02.2015 12:32

Цитата:

Сообщение от apollo100
То есть чтоб добавлялось по высоте контейнера столько сколько нужн

Так у тебя
Цитата:

Сообщение от apollo100
высота не ограничена

Т.о. как понять на какой момент она будет уже неизменной?

ruslan_mart 01.02.2015 13:48

http://learn.javascript.ru/play/jGjdg

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
     .container {
        border: 1px solid #000;
        height: 300px;
        overflow: hidden;
      }
      .container div {
        margin: 5px 0;
      }
    </style>
  </head>
  <body>
    
   	<div class="container">
      
    </div>

    <script type="text/javascript">
      
      var container = document.querySelector('.container'),
          div, n = 0;
      
      while(true) {
        div = document.createElement('div');
        div.innerHTML = ++n;
        container.appendChild(div);
        if(container.scrollHeight > container.clientHeight) {
          container.removeChild(div);
          break;
        }
      }

    </script>

  </body>
</html>

apollo100 01.02.2015 14:33

Цитата:

Сообщение от ksa (Сообщение 354448)
Так у тебя

Т.о. как понять на какой момент она будет уже неизменной?

в зависимости от длины контейнера, контейнера будут разные


Часовой пояс GMT +3, время: 01:49.