图片元素未正确放置在div中

Question

I try to place an img into a div, at a specific place (200, 100) but it always gets positioned in the top left corner (0, 0). 我尝试将img放置到div的特定位置（200、100），但它始终位于左上角（0、0）。 What am I doing wrong? 我究竟做错了什么？

<!doctype html>
<html>
<head>
    <title>Matching Game</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body id="theBody" onload="build_set()">
    <h1>Matching Game</h1>
    <div id="leftSide" style="position:absolute; top:100px; left:0; width:500px; height:500px"></div>
    <div id="rightside" style="position:absolute; top:100px; left:500px; width:500px; height:500px; border-left:3px solid black"></div> 
    <script>
        function build_set() {
            var leftSide = document.getElementById("leftSide");
            var rightSide = document.getElementById("rightSide");
            var smile = document.createElement("img");
            smile.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png")
            smile.style.top = "200px";
            smile.style.left = "100px";
            leftSide.appendChild(smile);
        }
    </script>
</body>
</html>

Answer 1

You need to set position for img also. 您还需要设置img的position 。 Here's jsFiddle 这是jsFiddle

  function build_set() { var leftSide = document.getElementById("leftSide"); var rightSide = document.getElementById("rightSide"); var smile = document.createElement("img"); smile.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png") smile.style.top = "200px"; smile.style.left = "100px"; smile.style.position = "absolute"; leftSide.appendChild(smile); } build_set();

  <h1>Matching Game</h1> <div id="leftSide" style="position:absolute; top:100px; left:0; width:500px; height:500px"></div> <div id="rightside" style="position:absolute; top:100px; left:500px; width:500px; height:500px; border-left:3px solid black"></div>

Answer 2

Your image is not absolutely positioned, so the left and top will be ignored. 您的图片并非绝对定位，因此left和top将被忽略。

Add the following to your javascript: 将以下内容添加到您的javascript中：

smile.style.position = 'absolute';

Here's a jsFiddle of the working version. 这是工作版本的jsFiddle 。

图片元素未正确放置在div中

问题描述

2 个解决方案

解决方案1
5 2016-01-21 10:54:38

解决方案2
1 已采纳 2016-01-21 10:56:21

图片元素未正确放置在div中

问题描述

2 个解决方案

解决方案1 5 2016-01-21 10:54:38

解决方案2 1 已采纳 2016-01-21 10:56:21

解决方案1
5 2016-01-21 10:54:38

解决方案2
1 已采纳 2016-01-21 10:56:21