Почему изображение inline вместо случайного внутри div?

-1

Im пытается создать левую сторону подходящей игры, и я не смог случайно разместить изображения. Они всегда появляются в горизонтальной линии, а не случайно в div. Пожалуйста, совет, очень ценим!Почему изображение inline вместо случайного внутри div?

отредактировано: Это не дублированный вопрос. По мере необходимости я не могу связать любой внешний CSS или JS-файл при создании этой игры.

отредактировано: неважно, возможно, это относительный вопрос к предыдущему. Поиск не придумал этот результат, поэтому вопрос.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<header> 
 
    <h1>Matching Gmae</h1> 
 
    <p>Click on the extra smilling face on the left.</p> 
 
</header> 
 

 
<body onload="generateFaces()"> 
 
    <!--division styling --> 
 
    <!--left--> 
 
    <div id="leftSide" style="position:absolute; width:500px; height:500px"></div> 
 
    <!--right--> 
 
    <div id="rightSide" style="position:absolute; width:500px; height:500px; left:500px; border-left: 1px solid black;"></div> 
 

 

 
    <!-- starting Javascript--> 
 
    <script> 
 
     var numberOfFaces = 5; 
 
     var i = 0; 
 
     var theLeftSide = document.getElementById("leftSide"); 
 

 
     function generateFaces() { 
 
      while (i < numberOfFaces) { 
 
       var img = document.createElement("img"); 
 
       img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
 
       img.style.top = Math.floor(Math.random() * 400) + "px"; 
 
       img.style.left = Math.floor(Math.random() * 400) + "px"; 
 
       theLeftSide.appendChild(img); 
 
       i += 1; 
 
      } 
 
     } 
 
    </script>> 
 
</body> 
 

 
</html>

источник

2015-12-23 Leorczhu

Возможный дубликат [CSS 'сверху' собственности не имеет никакого эффекта] (http://stackoverflow.com/questions/26065363/css-top- свойство не имеет-не-эффекта). 'top' и' left' применяются только к элементам с нестационарной позицией ', например. 'Позиция: абсолютная;'. – Xufox

Как писал @Xufox в комментарии, нестатический position должен быть установлен для top и left иметь никакого эффекта.

«Дублирующий» вопрос не объясняет, как это сделать в JavaScript.

В вашем скрипте, это означает, что вы должны добавить:

img.style.position = 'absolute';

источник

2015-12-23 01:50:08 zvone

спасибо ваш добрый ответ сэр! – Leorczhu

Почему изображение inline вместо случайного внутри div?

ответ

Смежные вопросы