个人中心
gpt4 book ai didi

php - span 在 Firefox 中向右移动一位

转载 作者：太空宇宙 更新时间：2023-11-04 13:53:19 25 4
gpt4 key购买 nike

所以我正在做一个制作投资组合页面的元素。该站点的想法是 PHP 计算 thumbs 文件夹中有多少文件，然后将它们打印出来并应用图库图像查看附加组件。目前它在 chrome 中工作得有点完美，但在 Firefox 中我的 span 元素向右移动了一个。这是我的 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;
}

我的代码中没有什么是酷的或干净的，对此深表歉意。已经感谢您的帮助

最佳答案

如果我没猜错，这可能是您的解决方案:

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;
}

关于php - span 在 Firefox 中向右移动一位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22063491/

25 4 0
文章推荐： java - 等待计时器/进程完成后再继续
文章推荐： c++ - 重载 << 错误
文章推荐： html - 重复 ID 的 W3C 错误
文章推荐： c++ - C++ XAML 游戏中的 Direct2d 访问冲突
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com