span在Firefox中向右移動
[英]span moves one to right in firefox
問題描述
所以我正在做一個制作投資組合頁面的項目。 該站點的想法是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;
}
我的代碼中沒有什么很酷或很干凈的，對此感到抱歉。 已經感謝您的幫助
1 個解決方案
解決方案1
1 已采納 2014-02-27 09:06:10
如果我說對了，這可能是您的解決方案：
.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標記上從左到右更改絕對位置
[英]change the absolute position from left to right on a span tag depending on class
為什么一個查詢返回正確的值，但是它返回0之后的那個？
[英]Why is one query returning the right value, but the one right after it returns 0?
為Propel ORM一對多和一對一關系編寫正確的架構？
[英]Write right schema for Propel ORM One to Many and One to One relationship?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.