Question

有问题的布局在这里：http://www.davedaranjo.com/media.html

这可能是css标准定位中的一个问题，但我已经尝试过每一个我能想到的定位组合来实现这个目标：

http://i.imgur.com/y1qRU.jpg

每当我尝试将播放器移动到页面的任何位置时，它就会将自己定位在底部，甚至在页脚图像下方。我甚至尝试将内容放在一个表格中，左边的td中的链接和视频以及右边的播放器，但播放器甚至不会坐在桌子上。我也在css文件中尝试了一些定位标签，最好是如果我给它一个固定的位置它会移动，但是因为其余的布局没有固定（并且不在其余部分网站），这不是一个可行的解决方案。

我意识到这可能是我在这里缺少的基础，但任何建议都会非常有帮助。插件下载文件在css中有很多定位，我似乎无法破译它们。

谢谢！

Answer 1

您必须将javascript放在页面中所需的位置。我想你可以这样定位。

<div id="left">
<img src="media/MediaTextBanner.jpg" alt="" width="596" height="58">
 <table>
 <tr>
 <td>
 <img src="media/Transcriptions.jpg" width="547" height="39">
 <br><a href="media/mmbtab.html">TABLATURE: Me &amp; My Bass Guitar: Victor Wooten</a>
 <br><a href="media/Circles - Gwizdala - Bass Parts.pdf"> Circles: Janek Gwizdala - Bass Notes</a>

 <br><a href="media/That Stern Look - Gwizdala - Bass Parts.pdf">That Stern Look: Janek Gwizdala - Bass Notes</a>
 <br><a href="media/flyback.html">Fly Back [2009 Redux]: Dave D'aranjo / The Ocean Band</a>
<p>
<img src="media/VideoBanner.jpg" width="547" height="39">
<p>
<iframe src="http://player.vimeo.com/video/21755863?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="398" height="224" frameborder="0"></iframe>
<br><a href="http://vimeo.com/darangatang" target="_blank"><img src="contact/thumbs/Vimeo.jpg" width="90" height="81"></a>
<a href="http://www.youtube.com/profile?user=DaveDaranjo" target="_blank"><img src="contact/thumbs/YouTube.jpg" width="90" height="81"></a>
<br><img src="media/OceanBanner.jpg" width="547" height="39">
 <br><a href="http://www.myspace.com/oceanband" target="_blank">The Ocean Band - MySpace</a>

 <br><a href="http://www.youtube.com/profile?user=theoceanbandsg" target="_blank">The Ocean Band - YouTube</a>
 <br><a href="http://www.cdbaby.com/Artist/TheOceanBand" target="_blank">The Ocean Band - CDBaby.com </a>
</p>
</td>
<td position: relative; vertical-align: top;><center>
<div id="title" align="right"></div></center>
</td>
</tr>
</table>

<center>
<img src="/ambigram.jpg" alt="" width="113" height="61"><br>
  <font color="CC0000"> &copy; 2011 DaveDaranjo.com<br>

    All Rights Reserved.</font></p>
    </center>
</div>

<div id="right">
<script type="text/javascript">
        $(document).ready(function(){
            var description = 'Solo bass work, videos, and songs from bands. ';

                       $('body').ttwMusicPlayer(myPlaylist, {
                autoPlay:false, 
                tracksToShow:12,
                description:description,
                jPlayer:{
                    swfPath:'../js' //You need to override the default swf path any time the directory structure changes
                }
            });
        });

    </script>
</div>

这会将您想要的文字和图像放在一个框中，将播放器放在另一个框中。你现在必须将盒子放在浮动盒子上，这样它们就可以在css中彼此相邻：

#left {
    float: left;
}

#right {
    float: right;
}

应该这样做！

Answer 2

我检查了您的源代码，您仍然使用对齐HTML属性。该属性已弃用。它在HTML 4.01或XHTML 1.0中不起作用，也不能在HTML 5中工作。

而是使用CSS规则进行对齐。使用文本对齐，填充，边距，浮动，清除和定位规则，使HTML元素显示在页面上您希望的位置。

来源：http://www.w3schools.com/tags/att_div_align.asp

jquery插件元素的CSS定位

2 个答案: