Два div по горизонтали
Здравствуйте,использую плагин для jquery, называется jqGalViewII.Это обычная галерея для картинок,там два дива создаются один под другим, в верхнем сама картинка, а в нижнем превью.Как сделать так, чтобы дивы создавались не один под другим,а рядом на одной линии?вот код стиля:
.gvIIContainer{ width:500px; position:relative; background:#000; padding:5px 0 5px 5px; /*border:10px solid #fff;*/ } .gvIIContainer .gvIIImgContainer{ width:490px; height:385px; } .gvIIContainer .gvIIImgContainer .gvIILoader{ background: url(/MAINSITE/images/rel_interstitial_loading.gif) no-repeat center center; width:490px; height:385px; display:none; } .gvIIContainer .gvIIHolder{ position:relative; height:207px; width:490px; overflow:auto; } .gvIIContainer .gvIIHolder .gvIIItem{ float:top; height:55px; width:72px; border:5px solid #fff; margin:2px; position:relative; overflow:hidden; } .gvIIContainer .gvIIHolder .gvIIItem .gvIIFlash{ background:#fff; position:absolute; top:0; left:0; height:55px; width:72px; cursor:pointer; } .gvIIContainer .gvIIHolder .gvIIItem img{ position:absolute; top:0; left:0; padding:0; margin:0; margin-left:0; margin-top:0; border:none; cursor:pointer; }Это сам скрипт.
(function($){ $.fn.jqGalViewII = function(options){ return this.each(function(index){ var el = this, $_ = $(this); $img = $('img', $_); el.opts = $.extend({}, $.fn.jqGalViewII.defaults, options); // swap out current image gallery for jqGalView structure var $this = $.fn.jqGalViewII.swapOut($_); var $container = $('<div class="gvIIContainer">').appendTo($this); el.mainImgContainer = $('<div class="gvIIImgContainer">').appendTo($container); el.image = $('<img/>').appendTo(el.mainImgContainer); el.loader = $('<div class="gvIILoader"/>').appendTo(el.mainImgContainer); // Build our holder for the thumbnail images var $holder = $('<div class="gvIIHolder"/>').appendTo($container); var $arrow = $('<div class="gvIIArrow"/>'); // remove current images and replace with jqGalview $(this).after($this).remove(); $img.each(function(i){ var $image = $(this); var $div = $('<div id="gvIIID'+i+'" class="gvIIItem">') .appendTo($holder) .append('<div class="gvIILoaderMini">');// end : $div if(el.opts.getUrlBy == 0) this.altImg = $image.parent().attr('href'); else if(el.opts.getUrlBy == 1) this.altImg = el.opts.fullSizePath + this.src.split('/').pop(); else if(el.opts.getUrlBy == 2) this.altImg = $this.src.replace(el.opts.prefix,''); this.altTxt = $image.attr('alt'); var image = new Image(); image.onload = function(){ image.onload = null; $div.empty().append($image); $('<div class="gvIIFlash">').appendTo($div).css({opacity:".01"}) .mouseover( function(){ var $f = $(this); $f.css({opacity:".75"}).stop().animate({opacity:".01"},500); } ) .click( function(){ $image.trigger('click'); } ); $image.click(function(){ $.fn.jqGalViewII.view(this,el); }); if(i==0){ $image.trigger('click'); $image.siblings().trigger('mouseover'); } };// end : image.onload image.src = this.src; }); $arrow.appendTo($holder); }); }; $.fn.jqGalViewII.view = function(img,el){ if(typeof img.altImg == 'undefined') return false; var url = /\?imgmax/.test(img.altImg) ? img.altImg : img.altImg+'?imgmax=800'; var $i_wh = {}; // var $i_whFinal = {}; // var wContainer, hContainer; var $w, $h, $wOrg, $hOrg, isOver = false; el.loader.show(); wContainer = el.mainImgContainer.width(); hContainer = el.mainImgContainer.height(); el.mainImgContainer.show(); el.image.attr({src:url}).css({top:0,left:0,position:'absolute'}).hide(); $img = new Image(); $img.onload = function(){ $img.onload = null; $w = $wOrg = $img.width; $h = $hOrg = $img.height; if ($w > wContainer) { $h = $h * (wContainer / $w); $w = wContainer; if ($h > wContainer) { $w = $w * (hContainer / $h); $h = hContainer; } } else if ($h > hContainer) { $w = $w * (hContainer / $h); $h = hContainer; if ($w > wContainer) { $h = $h * (wContainer / $w); $w = wContainer; } } el.image.css({width:$w,height:$h, marginLeft:(wContainer-$w)*.5,marginTop:(hContainer-$h)*.5}) el.loader.fadeOut('fast',function(){el.image.fadeIn();}); }; $img.src = url; }; $.fn.jqGalViewII.swapOut = function($el){ var id = $el.attr('id') ? (' id="'+$el.attr('id')+'"') : ''; var $this = $('<div' + id + '>'); return $this; }; $.fn.jqGalViewII.defaults = { getUrlBy : 0, // 0 == from parent A tag | 1 == the full size resides in another folder fullSizePath : null, prefix: 'thumbnail.', arrowEase:'easeout' };})(jQuery);
5 ответов
Можно вот так например:
<div style="width:210px"><div style=" width:100px; height:200px; border:1px solid #0033CC; float:right"></div><div style=" width:100px; height:200px; border:1px solid #0033CC; float:left"></div></div>или вот так, но тогда div превратится в span
<div style="width:210px"><div style=" width:100px; height:200px; border:1px solid #0033CC; display:inline;"></div><div style=" width:100px; height:200px; border:1px solid #0033CC; display:inline;"></div></div>
Измененные CSS блоки:
.gvIIContainer{ width:600px; /* здесь ширину подходящую, чтобы 2-е колонки влезли*/ position:relative; background:#000; padding:5px 0 5px 5px; /*border:10px solid #fff;*/ } .gvIIContainer .gvIIImgContainer{ width:490px; height:385px;float: left; /*<---*/ } } .gvIIContainer .gvIIHolder{ position:relative; height:490px; width:140px; /*ширина div превью*/ overflow:auto;float: left; /*<---*/ } DE20, всё равно хрен знает что получается.Может как-то сам скрипт разделить, на отдельные дивы, а их уже по ячейкам таблицы раскидать?
armor85, не переношу топик в вёрстку только потому, что контент генеришь используя jQuery. Вопрос же по сути чисто по вёрстке. Лучше всего использовать таблицу.Как вариант float: left предложенный DE20, но помни, такие плавающие слои не задают высоту родительскому div'у, тот попросту схлопнеться если ничего кроме плавающих слоёв в нём нет. Оба слоя налезут тогда на всё, что идёт дальше. Что бы это предотвратить, нужно поставить высоту .gvIIContainer{ height: 490px; }