jQuery循环-将图像与右侧的不同维度对齐?

jQuery循环-将图像与右侧的不同维度对齐?,jquery,css,css-float,jquery-cycle,Jquery,Css,Css Float,Jquery Cycle,我有一个幻灯片(jquery循环),我用它作为网站的背景。问题是,我想把右边的照片对齐,它们有不同的调光,出于某种原因,那些宽度最小的照片没有对齐到右边。。。我试着把img分为几个部分,比如互联网上的个人建议和不同的东西,但都没有用。不编辑插件就可以吗 HTML: <p class="slideshow"> <img src="31.jpg" alt="" /> <img src="35.jpg" alt="" /> <img src=

我有一个幻灯片(jquery循环),我用它作为网站的背景。问题是,我想把右边的照片对齐,它们有不同的调光,出于某种原因,那些宽度最小的照片没有对齐到右边。。。我试着把img分为几个部分,比如互联网上的个人建议和不同的东西,但都没有用。不编辑插件就可以吗

HTML

<p class="slideshow">
   <img src="31.jpg" alt="" />
   <img src="35.jpg" alt="" />
   <img src="36.jpg" alt="" />
</p> 
p.slideshow {
    position:absolute;
    top:0;
    right:0;
    z-index:-999;
    overflow:hidden;
    background: url(images/stripe-bg.png) repeat;
    margin:0;
    padding:0;

    /* without setting the width and height 100% I get the
       annoying scroll bar on the right if photos are big in height */
    /*height:100%;
    width:100%;*/
}
你有什么线索可以让它们都向右对齐吗

谢谢
Cris

我会尝试在div中浮动图像:

<div class="slideshow">
 <img src="31.jpg" alt="" />
 <img src="35.jpg" alt="" />
 <img src="36.jpg" alt="" />
</div>


div.slideshow {
position:absolute;
top:0;
right:0;
z-index:-999;
overflow:hidden;
background: url(images/stripe-bg.png) repeat;
margin:0;
padding:0;

/* width:;
height:;*/ }



 div.slideshow img { float:right: display:inline}

幻灯片放映{
位置:绝对位置;
排名:0;
右:0;
z指数:-999;
溢出:隐藏;
背景:url(image/stripe bg.png)重复;
保证金:0;
填充:0;
/*宽度:;
高度:;*/}
div.slideshow img{float:right:display:inline}

Cycle插件对图像使用绝对位置,也
顶部:0
左:0
,因此您必须编辑插件代码,因为它不是eplugin选项的一部分

只需打开插件文件并搜索
left:0
,然后将其更改为
right:0


如果更新插件,您只需再次执行此操作。

我在尝试右对齐容器中的某些内容时也遇到了此问题。这个解决方案对我们有效:

$('#sltitles span').each(function() {
  $(this).css({right: '0'});
}); 
你需要在主插件之前运行它,它才能应用到所有看起来的内容。我们的结局是:

<script type="text/javascript">
  $(document).ready(function() {
    $('#sltitles span').each(function() {
      $(this).css({right: '0'});
    });
    $('#sltitles').cycle({
      fx: 'fade'
    });
  });
</script>

$(文档).ready(函数(){
$('#slspan')。每个(函数(){
$(this.css({right:'0'});
});
$('#sltitles')。循环({
外汇:“褪色”
});
});

也许这会帮助其他有同样问题的人。

这里有一个非常简单的直接css解决方案,它不需要破解插件或大量多余的jQuery代码

p.slideshow img {
    left: auto !important;
    right: 0 !important;
}
这也适用于非图像幻灯片项目:

div.cycle-slide {
    left: auto !important;
    right: 0 !important;
}

浮动图像不适用于循环,因为图像完全由插件定位。这是一个很酷的解决方案。谢谢如果我想垂直对齐不同尺寸的幻灯片图像,我只会在“margin:0 auto”中使用相同的解决方案,对吗?如果你只需要css就可以了,为什么还要在客户端添加额外的jquery来处理呢?不要攻击cycle插件,有更好的方法可以轻松地升级插件。