缩略图未排列答案

【问题标题】：thumbnails not lining up缩略图未排列
【发布时间】：2013-03-29 08:46:12
【问题描述】：

我正在尝试将 youtube api 提要粘贴到此页面上，但缩略图没有正确排列。工作地点可以在here找到。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inner page</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="main_block">
 <div id="innerblock">


                 <!--Top Panel starts here -->

        <div id="top_panel">


                <a href="index.html" class="logo"><img src="images/logo.jpg" width="255" height="36" alt="" /></a><br />

            <div class="tp_navbg">
                <a href="index.html">Home</a>
                <a href="inner.html">Upload</a>
                <a href="#">Videos</a>
                <a href="#">Channels</a>
                <a href="#">News</a>
            </div>

            <div class="tp_smlgrnbg">
                <span class="tp_sign"><a href="#" class="tp_txt">Sign Up</a>
                <span class="tp_divi">|</span>
                <a href="#" class="tp_txt">Login</a>
                <span class="tp_divi">|</span>
                <a href="#" class="tp_txt">Help</a></span>
            </div>

            <div class="tp_barbg">
                <input name="#" type="text" class="tp_barip" />
                <select name="#" class="tp_drp"><option>Videos</option></select>
                <a href="#" class="tp_search"><img src="images/tp_search.jpg" width="52" height="24" alt="" /></a>
                <span class="tp_welcum">Welcome <b>Guest</b></span>

            </div>

        </div>





                <span class="lp_newvidit1">Video Title</span>


    <link rel="stylesheet" type="text/css" href="files/style6.css">
<script type="text/javascript" src="files/jquery-1.js"></script>
<script type="text/javascript" src="files/jquery.js"></script>
<script>
$(document).ready(function(){

        $("body").append("<div id = 'data'><ul>.</ul></div>");
        var dataContainer = $("#data ul");
        $.ajax({
            url:'http://gdata.youtube.com/feeds/api/users/googledevelopers/uploads?max-results=50&time=today&alt=jsonc&v=2&callback=?',
            dataType: "jsonp",
            timeout: 5000,
            success: function(data){

                     $.each(data.data.items, 
                               function(i, val) {

                                 if (typeof(val.player) !== 'undefined' && typeof(val.title) !== 'undefined') {

                                    dataContainer.append('<div class="d e"><a href='+val.player["default"]+' target="_blank" title="'+val.title+'">'+val.title+'</a><br /><img src="'+val.thumbnail.sqDefault+'" width="120" height="90" alt="'+val.title+'"/><br />Views '+val.viewCount+'</div>');
                                 }
                         });
                    }
                });
            });

</script>

否则缩略图会排成一行。喜欢here 否则缩略图会排成一行.....

【问题讨论】：

看起来不错。你在看什么浏览器？
在 chrome 中很好。 but in firefox its mis-aligned
将vertical-align: top; 添加到<div class="d e" /> 标签

标签： jquery html css youtube-api

【解决方案1】：

您缺少两个结束标记 </div> 尝试将它们添加到文档末尾 </body> 结束标记之前并更改：

$("body").append("<div id = 'data'><ul>.</ul></div>");

到这里：

$("#main_block").append("<div id = 'data'><ul>.</ul></div>");

添加这个 css 属性：

#data{
  overflow: auto;
  width: 100%;
}

将包括 jquery 脚本在内的脚本和样式表链接移到 head 部分，并将它们放在 <title></title> 标记之后，这将使文档在加载正文之前先加载这些脚本，这将提高性能并防止潜在问题。

【讨论】：

它在一定程度上纠正了问题，但顶部栏仍然未对齐。喜欢here。我添加了
标签并编辑了您帖子中提到的行。

在服务器上上传您更新的网站并分享一个链接，以便我查看，或者在此处添加 CSS 脚本。

出了什么问题？对我来说看起来不错！

我在 Firefox 上查看它，这是what I get.

是的，它在 Firefox 上相当混乱，添加 float: left 到 #data

【解决方案2】：

尝试在你的 CSS 中添加类似的东西

#data ul{padding-top: 240px;}

当我使用视图源时，您似乎缺少 2 个结束 div 标签，不确定这是否是导致错位的原因。

【讨论】：

这很可能是错位的原因，因为data div 会放在innerblock 内，否则