作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 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缩略图以其他方式排列......
最佳答案
您缺少两个结束标记 </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 脚本在内的脚本和样式表链接移动到头部,并将它们放在 <title></title>
之后标记,这将使文档在加载正文之前先加载这些脚本,这将提高性能并防止潜在的问题。
关于jquery - 缩略图不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15859287/
我有一个具有可变数量子元素的固定大小的 div。我不知道 children 的大小。目标是缩小它们以适合父级。 例子: .parent { width: 100px; height: 100p
我是一名优秀的程序员,十分优秀!