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)
Так у тебя

Т.о. как понять на какой момент она будет уже неизменной?
в зависимости от длины контейнера, контейнера будут разные

apollo100 01.02.2015 15:20
Цитата:
Сообщение от Ruslan_xDD (Сообщение 354451)
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>
А как сделать чтоб цифры были в div контейнерах

apollo100 01.02.2015 15:22
Ruslan_xDD, Как сделать тоже, толь чтоб цифры были в div контейнерах

ruslan_mart 01.02.2015 17:16
apollo100, они и так в div. Или переформулируй свой вопрос (если это вопрос).

apollo100 01.02.2015 21:48
Я имел в веду вот так

<div class="sd">1</div>
<div class="sd">2</div>
<div class="sd">3</div>
<div class="sd">4</div>
<div class="sd">5</div>
<div class="sd">6</div>


и так далие

ruslan_mart 02.02.2015 06:52 
<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
     .container {
        border: 1px solid #000;
        height: 300px;
        overflow: hidden;
      }
      .container div {
        margin: 5px 0;
      }
      .sd {
        color: red;
        font-weight: bold;
      }
    </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.className = 'sd'
        div.innerHTML = ++n;
        container.appendChild(div);
        if(container.scrollHeight > container.clientHeight) {
          container.removeChild(div);
          break;
        }
      }

    </script>

  </body>
</html>

apollo100 02.02.2015 09:33
ОГРОМНОЕ СПАСИБО:thanks: :thanks: :thanks: :thanks:


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