Question

我正在为慈善事业创造一些东西。这是一幢带砖头的房子。你捐钱，点击砖块，你就有机会获奖。

我的问题在于我使用DIV将门放在砖块上的方式。 DIV覆盖了右边的所有砖块，它们不可点击。我不知道如何更改它以便我可以访问底部DIV门底部的砖块。

以下是工作网址：http://matrixaccelerator.com/house2.php

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>House</title>
<script type="text/javascript">
    function rewriteTag($x,$y,$brick) {
        alert("Buy/Bought");
        document.getElementById($x+','+$y).innerHTML = "<img src='images/brick"+$brick+".png'>";
    }
</script>
</head>
<body>
<img src="images/roof1.png" /><br />
<?php 
for ($y=1; $y <= 20; $y++) {
    if ((floor($y/2)) == ($y/2)) {
        $brickID = rand(1,3);
        echo "<img src='images/brick".$brickID."halfleft.png' style='padding-left:9px;'>";
    }
    for ($x=1; $x <= 20; $x++) {
        $brickID = rand(1,3);
        $freeSpaces = array('9,4','10,4','11,4','10,5','11,5','12,5','9,6','10,6','11,6','10,7','11,7','12,7','9,8','10,8','11,8','10,9','11,9','12,9','9,10','10,10','11,10','10,11','11,11','12,11','9,12','10,12','11,12','10,13','11,13','12,13','9,14','10,14','11,14','10,15','11,15','12,15','9,16','10,16','11,16','10,17','11,17','12,17','9,18','10,18','11,18','10,19','11,19','12,19','9,20','10,20','11,20');
        if (in_array($x.','.$y, $freeSpaces)) {
            $grey = "";
            echo "<span id='".$x.",".$y."'><img src='images/brick".$brickID.$grey.".png''".(((floor($y/2) <> $y/2) && ($x == 1)) ? 'style=\'padding-left:9px;\'' : '')."></span>";
        } else {
            $grey = "grey";
            echo "<span id='".$x.",".$y."'><img src='images/brick".$brickID.$grey.".png' onmouseover='this.src=\"images/brick".$brickID.".png\"' onmouseout='this.src=\"images/brick".$brickID."grey.png\"' onclick='rewriteTag(".$x.",".$y.",".$brickID.");'".(((floor($y/2) <> $y/2) && ($x == 1)) ? 'style=\'padding-left:9px;\'' : '')."></span>";
        }
    }
    if ((floor($y/2)) <> ($y/2)) {
        $brickID = rand(1,3);
        echo "<img src='images/brick".$brickID."halfright.png'>";
    }
    echo "<br>\n";
}
?>
<div style="position:relative;top:-239px;right:-395px;"><img src="images/door.png"></div>
</body>
</html>

Answer 1

将width:108px;添加到门div的样式中。

<div style="position:relative;top:-239px;right:-395px; width:108px;"><img src="images/door.png"></div>

Answer 2

门图像的包装没有宽度，所以直到右边框。将width:108px;（门图像的大小）添加到此包装的样式属性中。

<div style="position:relative;top:-239px;right:-395px;width:108px;">

Answer 3

你的问题是你的div向右伸展得太远了。如果你为它添加边框，你可以很容易地看到这一点，如下所示：

<div style="position:relative;top:-239px;right:-395px; border:solid 2px red;">

enter image description here

修复它，只需为它设置合适的宽度：

<div style="position:relative;top:-239px; right:-395px; width:108px;">

Answer 4

替代CSS，使用display:inline-block代替width。我还将否定右侧切换为左侧偏移，因为它感觉更干净。

position: relative;
top: -239px;
left: 395px;
display: inline-block;

Answer 5

修复它，只需为它设置合适的宽度：

<div style="position:relative;top:-239px; right:-395px; width:108px;">

如何更改DIV以便我可以点击它背后的元素？

5 个答案: