html - 如何摆脱 <a hrefs> 和 <img> 之间的空白

Question

我有一堆 hrefs，里面有图像，可以在页面的左上角制作一个菜单。在菜单之后，我旁边有一个图像，它会扩展到页面末尾。但是，该图像现在位于菜单区域下方。

我如何摆脱这个空白区域？

.MenuArea
{
        position:relative;
        width:225px;
        height:300px;
        background-color:#666666;
        text-align:center;
        display:inline-block;
        padding:0;
        margin:0;
}
.MenuAreaImageSmall
{
    position:relative;
    left:225px;
    height:300px;
    text-align:center;
    display:block;
    padding:0;
    margin:0;
}
.MenuLink
{
    position:relative;
    top:15px;
    width:225px;
    padding:0;
    display:inline-block;
    border:0 solid #ffffff;
}
.Href
{
    margin:0;
    padding:0;
}

                    $cpage = $page."ImgArea";
                    $query = "Select * FROM ContentTab WHERE InUse='Y' && PageAssignment='".$cpage."' && ContentType='Image' ORDER BY ContentOrder ASC";
                    $result = mysql_query($query);
                    $num = mysql_numrows($result);

                    $cpage1 = $page."Link";
                    $query = "Select * FROM ContentTab WHERE InUse='Y' && PageAssignment LIKE '".$cpage1."' && ContentType='Image' ORDER BY ContentOrder ASC";
                    $result1 = mysql_query($query);
                    $num1 = mysql_numrows($result1);

                    $n = 0;
                    $i = 0;
                    while($n < $num)
                    {
                        $image = mysql_result($result,$n,"Content");

                        if($cpage == "SolutionImgArea")
                        {
                            if($n == 0)
                            {
                                $output = "<div id=\"MenuAreaBox\" class=\"MenuArea\"/>\n";

                                while($i < $num1)
                                {
                                    $links = mysql_result($result1,$i,"PageAssignment");

                                    if($links == $cpage1)
                                    {
                                        $linkimg = mysql_result($result1,$i,"Content");
                                        $temp = $linkimg;
                                        list($linkimg2, $format) = split('[.]', $temp);
                                        $temp = $linkimg2;
                                        $linkimg2 .= "_roll.".$format;
                                        list($trash, $trash, $filename) = split('[/]', $temp);

                                        $output .= "<A href=\"test.php?page=Solution\" onmouseover=\"roll_over('".$filename."', '".$linkimg2."')\" onmouseout=\"roll_over('".$filename."', '".$linkimg."')\" class=\"Href\">";
                                        $output .= "<img name=\"".$filename."\" src=\"".$linkimg."\" alt=\"\" class=\"MenuLink\"/>";
                                        $output .= "</A>";
                                    }
                                    $i++;
                                }
                            }
                            if(($n+1) == $num)
                            {
                                //$output .= "                  </div>\n";
                                $output .= "<img src=\"".$image."\" class=\"MenuAreaImageSmall\" alt=\"\"/>";
                            }

                        }
                        else
                        {
                            $output = "<img src=\"".$image."\" class=\"MenuAreaImageBig\" alt=\"\"/>";
                        }
                        $n++;
                    }
                    echo $output;?>

Answer 1

之前的链接: 测试1.php

链接到之后: http://www.gramercyit.com/test.php

通过将我的位置更改为绝对位置并将顶部设置为 0px 来解决它；很抱歉浪费了你们的时间，我只是不认为它会那样工作嘿。