Question

我正在尝试为我在动画课上完成的一些学校作品创建一个小画廊。我想在每一行上放三张图片，它们都是div，因为我做了洋葱皮包装，为它们留下了阴影。不幸的是，这使得它们只是在页面的两行中粘在一起。但我想要他们特别格式化，所以我试图在每组3包围一个480px宽的div。在IE中这很好用，看起来很完美。但是在Firefox中它可以做到这一点

我无法弄清楚为什么它会使第二行左对齐并因此搞砸其余部分的顺序。这是我的代码：

<!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>

Answer 1

看起来您的第二张图片可能比第三张图片略高。因此，浮动的第二行只会向后浮动，直到它到达第二个图像。设置图像或wrap1高度，或将style =“clear：both”添加到行之间的break标记。

Answer 2

我看不到你的照片，但根据你的描述，听起来好像你没有清除浮子。在div中的三个图像的每个块之后有一个br，因此添加以下CSS将清除浮动并连续显示三个。

br { clear: both; }

Answer 3

此外，如果指定的“行”上没有足够的宽度，它将下拉到下一行。尝试使窗口尽可能宽（单击n拖动），看看这是否是问题。

Firefox无法正确对齐图像

3 个答案: