1
我正在嘗試製作一些我在動畫類中做過的作品。我想在每一行放3張圖片，因爲我做了洋蔥皮包裝，在它們上面進行了陰影處理，所以它們都是分隔線。不幸的是，這使得它們全都在頁面上以兩行連接在一起。但我希望它們具有特定的格式，所以我試圖在每組3中包裝一個寬度爲480px的div。在IE中，這種方式效果很好，看起來很完美。但是在Firefox它這樣做Firefox Div問題
http://i44.tinypic.com/1r5hdg.jpg
我想不通爲什麼它是把一個留在第二線對齊，因此搞砸了，其餘的順序。這裏是我的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ryan Merl's Portfolio</title>
<style type='text/css'>
* {
padding: 0px;
margin: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
body {
background-color:#333333;
background-image: url('images/head.png');
background-repeat: repeat-x;
}
a {
color:#333333;
text-decoration: none;
}
a:hover {
color:#000000;
text-decoration:underline;
}
div.main {
width: 800px;
background-color:#FFFFFF;
margin-top: 10px;
color: #000000;
height: 1000px;
margin-bottom: 10px;
}
img.thumb {
}
.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap1 {
float:left;
background:url('images/shadow.gif') right bottom no-repeat;
}
.wrap2 {
background:url('images/corner_bl.gif') left bottom no-repeat;
}
.wrap3 {
padding:0 4px 4px 0;
background:url('images/corner_tr.gif' ) right top no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="doc/css/style.css" />
<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript" src="glossy.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('en', 'src/lang');
Shadowbox.loadPlayer(['flv', 'html','img', 'swf'], 'src/player');
window.onload = function(){
Shadowbox.init();
};
</script>
</head>
<body>
<center><div class='main'>
<img src='images/theantistudio.png' /><br /><br />
<img src='images/gallery.png' /><br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_particle_fire.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fire.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_firework.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_firework.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_fountain.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_fountain.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_logo.flv' rel='shadowbox'><img class='thumb' src= 'thumbs/thumb_logo.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_rocket_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_rocket.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_solar_system.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_solar_system.png' /></a>
</div>
</div>
</div>
</div>
<br />
<div style='text-align:center;width:480px;'>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_space_ship.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_space_ship.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_still_life.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_still_life.png' /></a>
</div>
</div>
</div>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<a href='video/rmerl_walkthrough.flv' rel='shadowbox'><img class='thumb' src='thumbs/thumb_walkthrough.png' /></a>
</div>
</div>
</div>
</div>
</div></center>
</body>
</html>
會很好，如果您將圖像縮小一點，如果您要鏈接它內聯。 – U62 2009-02-13 13:56:39
請記住，我們沒有您的圖片......所以要我們看看這個，您必須在圖片標籤上添加寬度和高度屬性。 – stusmith 2009-02-13 14:01:58