За последние 24 часа нас посетили 15052 программиста и 1771 робот. Сейчас ищут 1465 программистов ...

innerHTML и динамические div'ы в цикле

Тема в разделе "JavaScript и AJAX", создана пользователем Vladim, 17 мар 2017.

  1. Vladim

    Vladim Новичок

    С нами с:
    24 дек 2014
    Сообщения:
    11
    Симпатии:
    0
    Всем доброго времени суток!
    Вопрос знатокам javascript. Есть вот такой код.
    Код (Javascript):
    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <title>JS</title>
    5.     </head>
    6.     <style>
    7.         body{
    8.             margin: 0;
    9.         }
    10.         #contaner{
    11.             margin: 0;
    12.             padding: 0;
    13.         }
    14.         .wrapper{
    15.             margin: 0;
    16.             padding: 0;
    17.             height: 32px;
    18.         }
    19.         .first{
    20.             width: 30px;
    21.             height: 30px;
    22.             background: green;
    23.             display: inline-block;
    24.             margin: 1px;
    25.             padding: 0;
    26.         }
    27.         .main{
    28.             width: 30px;
    29.             height: 30px;
    30.             background: blue;
    31.             display: inline-block;
    32.             margin: 1px;
    33.             padding: 0;
    34.         }
    35.         span{
    36.             width: 30px;
    37.         }
    38.     </style>
    39.     <body>
    40.         <div id="contaner"></div>
    41.     </body>
    42.     <script type="text/javascript">
    43.      
    44.         var stop = 5;
    45.         var cntr = document.getElementById("contaner");
    46.      
    47.         for(var i=0; i<stop; i++){
    48.             var wrap = document.createElement("div");
    49.             wrap.className = "wrapper";
    50.             cntr.appendChild(wrap);
    51.          
    52.             for(var j=0; j<stop; j++){
    53.          
    54.                 var first = document.createElement("div");
    55.                     first.className = "first";
    56.                     wrap.appendChild(first);
    57.              
    58.                 if(j == 3){
    59.                     first.innerHTML = j;
    60.                 }
    61.             }
    62.         }
    63.      
    64.     </script>
    65. </html>
    Вывод дает результат при котором дивы, находящееся в блоке if, вываливаются из общего ряда.
    Если убрать блок if, тогда все нормально.
    Вопрос! Почему так происходит?
    Заранее благодарю за помощь.
     
    #1 Vladim, 17 мар 2017
    Последнее редактирование модератором: 17 мар 2017
  2. abrdabr

    abrdabr Новичок

    С нами с:
    28 янв 2017
    Сообщения:
    774
    Симпатии:
    65
    @Vladim "вываливаются" это как?
     
  3. abrdabr

    abrdabr Новичок

    С нами с:
    28 янв 2017
    Сообщения:
    774
    Симпатии:
    65
    сам посмотрел. проблема не в яс но в цсс: display
    float:left;
    display: inline;
     
    #3 abrdabr, 17 мар 2017
    Последнее редактирование: 17 мар 2017