如何：根据图库内容动态div宽度
|
http://portfolio.curiouslucious.com/?page_id=8
我正在尝试创建一个水平滚动库（具有已编辑的wordpress主题）
目前，我有nextGen Gallery插件，可以管理我的所有图像。
现在，我可以使图像彼此相邻显示并水平滚动的唯一方法是将图库宽度设置为大的-10000px
/* ----------- Gallery style -------------*/
.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width:10000px;
overflow: hidden;
clear:both;
display:inline-block !important;
}
/* ----------- Gallery style -------------*/
/* Blocks */
#container { width:1000px; margin:25px 60px; }
#left-box { float:left; width:270px; margin-right:65px; }
#sidebar { float:right; text-align:right; }
#sidebar ul { text-align:right; list-style:none; }
#sidebar h3 { font-size:1em; }
#sidebar small { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }
#author_note { font-size:0.85em; width:220px; padding:5px; border:1px solid #CDCDCD; float:right; text-align:right; }
#notes { width:600px; float:left; margin-top:20px; overflow-x:auto; overflow-y:hidden; height:500px; display:inline-block;}
#notes h1 { font-size:1.6em; font-weight:normal; margin:0; padding:0; }
#logo { float:right; margin-top:30px; }
#navigation { clear:right;float:right; width:270px; text-align:right; }
.copyright { margin-top:40px; color:#999999; }
.copyright a { color:#666666; text-decoration:underline; }
.copyright .theme { font-size:0.7em; font-family:Arial, Helvetica, sans-serif; }
.copyright .theme a { color:#999; text-decoration:none; }
.pages { margin-top:80px; font-size:1.1em; font-weight:200; }
.pages li { margin-top:5px; font-size:0.9em; }
.categories { margin-top:45px; font-size:0.85em; }
.links { margin-top:45px; font-size:0.85em; }
.navigation { margin-bottom:50px; font-size:0.85em; }
没有找到相关结果
已邀请:
2 个回复
土投
.theContent { display: table; } .ngg-galleryoverview { display: table-row; float: none; } ngg-gallery-thumbnail-box { display: table-cell; float: none; }筷啸够对铅
#scrollGal { overflow-x: scroll; overflow-y: hidden; border: 1px solid black; padding: 15px; } #scrollGal img { float: left; margin: 0px; padding: 0px; } #scrollGal div { margin: 0px; padding: 0px; } #notes { overflow-x: visible; overflow-y: visible; }(function( $ ){ $.fn.scrollGal = function() { return this.each(function() { $(this).wrap(\'<div id=\"scrollGal\" />\'); $sg = $(this).parent(); var obj = $(this).find(\'img\'); var arr = $.makeArray(obj); var w = 0, ww = 0, h = 0; $.each(arr, function(i, val) { w += $(this).width(); w += (parseInt($(this).css(\'marginRight\'))); // find greatest width var nw = $(this).width(); if (nw > ww) ww = nw; // find greatest height var nh = $(this).height(); if (nh > h) h = nh; }); $sg.width(ww); $sg.height(h); $sg.children(\'div\').width(w); }); }; })( jQuery ); $(\'#ngg-gallery-1-8\').scrollGal();