Question

所以我正在制作一个项目来制作投资组合页面。该网站的想法是PHP计算Thumb文件夹中有多少文件，然后将它打印出来并应用图库图像查看附加组件。在这一刻它的工作有点完美无瑕铬，但在Firefox中，我的跨度元素正在向右移动。这是我的PHP 这是我的php

<HTML>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="tyyli.css">
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.magnific-popup.js"></script>
        <script src="js/gallery.js"></script>
        <link rel="stylesheet" href="js/magnific-popup.css">
    </head>

    <body>
        <div class="wrapper">
            <div class="yla">
                <div class="ylavasen"></div>
                <div class="ylakeski"><img class="logo" align="middle"  src="logo.png"></img></div>
                <div class="ylaoikea"><div class="cont" ><a href="mailto:i dont even know"><p class="contact">Contact Us</p></a></div></div>
            </div>

            <?php 
            // integer starts at 0 before counting
            $i = 0; 
            $dir = 'tumbit/';

            if ($handle = opendir($dir)) {
                while (($file = readdir($handle)) !== false){
                    if (!in_array($file, array('.', '..')) && !is_dir($dir.$file)) 
                        $i++;
                }
            } //so this counts files
            ?> 

            <div class="popup-gallery">
                <?php 
                do {
                    echo '<a href="kuvat/kuva_'. $i .'.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_'. $i.'.png"></a>'; //and this echo's them to the page.
                    $i = $i - 1;
                } while ($i>0);
                ?>
            </div>
            <div class="footer">Some random footer ;D</div>
        </div>
    </body>
</HTML>

我知道它不是很漂亮和东西，但它就是它的本质。哦，对于那些没有服务器等的人来说，输出html：

<HTML>
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="tyyli.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.magnific-popup.js"></script>
    <script src="js/gallery.js"></script>
    <link rel="stylesheet" href="js/magnific-popup.css">
    </head>

    <body>
        <div class="wrapper">
            <div class="yla">
                <div class="ylavasen"></div>
                <div class="ylakeski"><img class="logo" align="middle"  src="logo.png"></img></div>
                <div class="ylaoikea"><div class="cont" ><a href="mailto:asd"><p class="contact">Contact Us</p></a></div></div>
            </div>

            <div class="popup-gallery">
                <a href="kuvat/kuva_11.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_11.png"></a><a href="kuvat/kuva_10.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_10.png"></a><a href="kuvat/kuva_9.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_9.png"></a><a href="kuvat/kuva_8.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_8.png"></a><a href="kuvat/kuva_7.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_7.png"></a><a href="kuvat/kuva_6.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_6.png"></a><a href="kuvat/kuva_5.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_5.png"></a><a href="kuvat/kuva_4.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_4.png"></a><a href="kuvat/kuva_3.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_3.png"></a><a href="kuvat/kuva_2.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_2.png"></a><a href="kuvat/kuva_1.jpg" class="homo"><span class="huora">View</span><img class="huoran" src="tumbit/thumb_1.png"></a>
            </div>
            <div class="footer">again, a random footer</div>
        </div>
    </body>
</HTML>

这是我的css：

body {
text-align: center;
font-size: 18px;
font-family:Verdana;
height:100%;
margin:0 0 0 0;
}
.wrapper {
    max-width:1200px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    min-height:100%;
    overflow:hidden;
    position:relative;
}
.yla {
    margin-top:30px;
    margin-bottom:30px;
    text-align:center;
    height:145px;
    z-index:1;
    }
.ylavasen {
    margin-bottom:30px;
    width:33.33%;
    float:left;
    }
.ylakeski {
    margin-bottom:30px;
    width:33.33%;
    float:left;
    }
.ylaoikea {
    margin-bottom:30px;
    width:33.33%;
    float:left;
    height:142;
    }
.cont {
    background-color:#ed1c24;
    height:26px;
    width:117px;
    text-align:center;
    margin-top:116px;
    margin-left:auto;
    margin-right:0px;
    }
.contact {
    color:white;
    font-family:Verdana;
    }
.cont:hover {
    opacity:0.5;
}
.thumb {
    width:300px;
    height:150px;
    margin-left:0px;
    margin-right:0px;
    z-index:1;  
    }
.thumb:hover {
    opacity:0.5;
    }
.kuvat {
    text-align:center;
    }
a {
text-decoration:none
}
.popup-gallery {
    max-width:1200px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    min-height:50%;
    overflow:hidden;
    overflow-y:no;
    clear:both;
    z-index:3;
    padding-bottom:100px;
    }
.footer {
    text-align:center;
    color:#b49980;
    font-size:14px;
    margin-bottom:30px;
    position:absolute;
    bottom:0;   
    z-index:-2;
    overflow:hidden;
    clear:both;
    position:absolute;
    bottom:0;
    z-index:-1;
    max-width:1200px;
    width:100%;
    }
.teksti {
    display:none;
    height:150px;
    width:300px;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-top:0px;
    float:left;
    }
.homo {
    padding: 0;
    width:300px;
    height:150px;
    float:left;
    display:block;
    overflow:auto;
}
.huora {
    position:absolute;
    float:left;
    color:white;
    background-color:rgba(255,255,255,0.8);
    width: 300px;
    height: 150px;
    line-height:150px;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.huora:hover {
    opacity:0.5;
    background:black;
}
img.huoran {
    float:left;
}

在我的代码中没有什么是酷或干净的，所以很抱歉。非常感谢您的帮助

Answer 1

如果我说得对，这可能是你的解决方案：

FIDDLE

.homo {
    padding: 0;
    width:300px;
    height:150px;
    float:left;
    display:block;
    overflow:hidden;
    position:relative;
}
.huora {
    position:absolute;
    z-index:1;
    color:white;
    background-color:rgba(255,255,255,0.8);
    width: 300px;
    height: 150px;
    line-height:150px;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
img.huoran {
    position:absolute;
}

span在firefox中向右移动一个

1 个答案: