Question

我有想法在一个高度为29px的div中包含一个高度为270px的swf。这个div将绝对位于页面底部，而处于正常状态的swf文件只占用29px的高度。直到用户在swf的某些部分上盘旋它才会占用270px的高度。我打算使用一些java脚本来改变div的高度。但是我遇到的问题是swf文件不会对齐div的底部。尽管我正在放入<param name="salign" value="lb" />，也就是左对齐，但它似乎始终与顶部对齐。是不是可以将swf装入较小的div并使swf与底部对齐而不是从顶部向下推？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>egnewsTicker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #ffffff;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:29px; vertical-align:bottom; display:inline-block;}
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="egnewsTicker" align="bottom" vertical-align="bottom">
                <param name="movie" value="egnewsTicker.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="transparent" />
                <param name="scale" value="noscale" />
                <param name="menu" value="false" />
                <param name="devicefont" value="false" />
                <param name="salign" value="lb" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="egnewsTicker.swf" width="100%" height="100%">
                    <param name="movie" value="egnewsTicker.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="transparent" />
                    <param name="scale" value="noscale" />
                    <param name="menu" value="false" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="lb" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

Answer 1

解决这个问题的一种快速而肮脏的方法是将swf包装在第二个div中，如下所示：

<div id="hoverDiv" style="position: relative;  overflow: hidden;">
<div id="wrapperDiv" style="position: absolute; bottom: 0px;">
<!-- SWF here -->
</div>
</div>

然后你可以用javascript操纵“hoverDiv”的高度。 SWF应该位于“wrapperDiv”的顶部，它将位于“hoverDiv”的底部，并且应该隐藏wrapperDiv的任何溢出。

Answer 2

在你的css中试试这个：

vertical-align:bottom;

如果这不起作用，请在上一个代码之后添加：

display:inline-block;

Answer 3

<div id="wrapperDiv" style="text-align:bottom;border:1px solid black;display:inline-block">
<!-- text goes here -->
</div>

将swf对齐div的底部，即使div小于swf？

3 个答案: