css - Jquery 照片库的 CSS 样式问题

Question

向这个很棒的社区的每一位成员问好!!!我目前正在特别使用 jQuery slider http://www.kyrielles.net/sliderkit/demos/photos-galleries.html ，带有字幕功能和缩略图导航剪辑的那个。我的问题是，当我第一次测试时，画廊看起来很完美，但是当我插入当前元素的起始页时，导航剪辑的缩略图图片而不是一个接一个地被排序。他们被命令一个在另一个下面。所以在剪辑中我只能看到第一个缩略图，其他的都被隐藏了。html代码是:

 <div class="sliderkit photosgallery-captions">
 <div class="sliderkit-nav">
 <div class="sliderkit-nav-clip">
 <!---php for-loop that retrieves the thumbnail pics--->
 <ul>
 <li><a href="#"  rel="nofollow" title="[link title]"><img src="<#IMAGE2#>" alt="[Alternative   text]" /></a></li>
 </ul>
 <!---end of loop--->
 </div>

CSS 样式是:

   .photosgallery-captions{width:500px;height:335px;padding:0 0 76px;}

   /* Navbar */
   .photosgallery-captions .sliderkit- nav{left:0;bottom:0;width:480px;padding:10px;background:#000;}
  .photosgallery-captions .sliderkit-nav-clip ul li{float:left;margin:0;}
  .photosgallery-captions .sliderkit-nav-clip ul li  a{display:block;width:75px;height:50px;overflow:hidden;margin:0;padding:3px;}
  .photosgallery-captions .sliderkit-nav-clip ul li.sliderkit-selected a{padding:0;border:3px solid #fff;}

  .sliderkit{display:none;position:relative;overflow:hidden;text-align:left;}
   .sliderkit a,
   .sliderkit a:hover{text-decoration:none;}
   .sliderkit a:focus{outline:1px dotted #000;/*optional*/}
    .sliderkit img{border:0;}

   /*---------------------------------
   *  Navigation
   *---------------------------------*/
  .sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center;}

  /* Nav > Clip */
  .sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
  .sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-   style:none;margin:0;padding:0;}
  .sliderkit .sliderkit-nav-clip ul li{float:left;}
  .sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;}

当我将溢出属性更改为可见时，我可以看到所有缩略图都存在，但按垂直顺序排列。对于我应该更改以解决此问题的任何建议，我们将不胜感激!感谢您花时间阅读本文...

Answer 1

将东西放入 li 将把它们放入垂直顺序。您可以做的是设置 css 以在您想要查看的任意多列中显示内容。列宽的总和必须小于 100%，否则一列将被向下推。然后在 php 中为每个循环添加几个变量。一个确定照片需要在哪一列(即 1、2、3 等)并将第二个设置为 class="float-x"，其中 x 是图像应该在的列。然后您可以将该变量添加到li 标签

例如

<style type="text/css">
    .float-1 {
    float: left;
    width: 33%;
}
    .float-2 {
    float: left;
    width: 33%;
}
    .float-3 {
    float: left;
    width: 33%;
}
</style>

然后在代码中(这是 c# 但 php 的概念应该相似)

<ul>
var i = 1;
@foreach(var item in Model.Application)
{
    var classStyle= "";
    if(i==3 || i%3== 0)
    {
        classStyle = "class=float-3";
    }
    else if(i==2 || i%3 == 2)
    {
        classStyle = "class=float-2";
    }
    else if (i==1 || i%3 == 1)
    {
        classStyle = "class=float-1";
    }
 }
 <li @classStyle><a href="#"  rel="nofollow" title="[link title]"><img src="<#IMAGE2#>" alt="[Alternative   text]" /></a></li>
i++;
}
</ul>

这适用于 3 列，但显然您可以很容易地将它用于 2 列或 4 列或任意数量的列。