Question

我有一堆href，里面有图像，可以在页面的左上角创建一个菜单。在菜单之后，我旁边有一个图像，它会扩展到页面的末尾。但是，现在该图像被删除在菜单区域下方。

如何摆脱这个空白区？

.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

链接到之前： test1.php

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

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

Answer 2

你有没有尝试过display：block，float：left for img和a？

Answer 3

不要听任何关于删除空格的人 - 它会有所帮助，但只会持续一段时间，直到你的内容被不知道白色空间技巧的其他人修改。：）

当您将float：left赋值给元素时，它会自动转换为块级元素。

因此，如果您只想使用CSS解决问题，请使用display：block作为图像。

如果您正在使用包含图像的文本（这不是此处指定的情况），请使用float：left或float：right。

Answer 4

我解决这个问题的方法是分配一个标签display：block

唯一的问题是你需要一个容器用于 a 和 img

<div class="image"><a href="#"><img src="blah.gif" /></a></div>

.image a,
.image img
{
  padding: 0;
  margin: 0;
  display: block;
}

另一种解决方案是（ ，但实际上非常糟糕，所以我建议不要这样做 ）

.image a
{
  font-size: 0;
}

最终在您的图像周围使用div可以让您在创建自适应图像时获得更好的时间，并且您想要给它们边框（没有它会妨碍您的定位），只需将边框应用到容器中即可。

如何摆脱<a hrefs=""> and <img/></a>之间的空格

4 个答案: