1

我正在为慈善机构创造一些东西。这是一栋砖砌的房子。您捐款，点击砖块，您就有机会获得奖品。

我的问题是我使用 DIV 在砖块上放置一扇门的方式。DIV 覆盖了它右侧的所有砖块，它们不可点击。我不确定如何更改它，以便可以访问底部 DIV 门后面的砖块。

这是一个有效的 URL： 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>
4

5 回答 5

1

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

<div style="position:relative;top:-239px;right:-395px; width:108px;"><img src="images/door.png"></div>
于 2013-03-14T07:55:08.407 回答
1

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

<div style="position:relative;top:-239px;right:-395px;width:108px;">
于 2013-03-14T07:56:07.530 回答
1

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

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

在此处输入图像描述

太修复它，只需为其设置适当的宽度：

<div style="position:relative;top:-239px; right:-395px; width:108px;">
于 2013-03-14T08:00:33.987 回答
1

替代 CSS，它使用display:inline-block而不是width. 我还将负右偏移切换为正左偏移，因为它感觉更干净。

position: relative;
top: -239px;
left: 395px;
display: inline-block;
于 2013-03-14T08:05:30.660 回答
0

太修复它，只需为其设置适当的宽度：

<div style="position:relative;top:-239px; right:-395px; width:108px;">
于 2013-03-14T08:06:46.270 回答