Question

我想要实现的布局如下，一个大图像，下面有四个缩略图：

我正在使用Javascript库实际显示全屏幕图库，点击此元素时会激活。

问题是图库脚本希望图像作为无序列表中的直接子图像，所有图像都包括我布局中的大图像：

<ul>
  <li data-src="img1.jpg">
      <img src="thumb1.jpg" />
  </li>
  <li data-src="img2.jpg">
      <img src="thumb2.jpg" />
  </li>
</ul>

第一个<li>是大图像，其他所有都是小缩略图。

有无法在无序列表中显示所有图像的方法来实现我想要的布局吗？如果我可以分解列表，这将很容易，但画廊脚本将无法识别。

是否可以在不更改列表的基础结构的情况下实现此布局？

Answer 1

我建议在float: left上使用display: block和li，在float: none上使用li:first-child：

ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li
{
    margin: 2px 5px;
    display: block;
    float: left;
}
li:first-child
{
    float: none;
}

<ul>
  <li>
      <img src="http://lorempixel.com/g/430/430/" />
  </li>
  <li>
      <img src="http://lorempixel.com/g/100/100/" />
  </li>
  <li>
      <img src="http://lorempixel.com/g/100/100/" />
  </li>
  <li>
      <img src="http://lorempixel.com/g/100/100/" />
  </li>
  <li>
      <img src="http://lorempixel.com/g/100/100/" />
  </li>
</ul>

简单干净，不涉及JS。

Answer 2

这是我基于flexbox的尝试。倾斜的图像是从网上拍摄随机猫图像并将它们约束到一定宽度和高度（fiddle）的副作用。

CSS：

ul {
    padding: 0;
    margin: 0;
}

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

li {
    /** add box-sizing: border-box; if you include padding or borders **/
}

li:first-child {
    width: 100%;
    height: 500px;
}

li:not(:first-child) {
    /** add box-sizing: border-box; if you include padding or borders **/
    width: 25%; /** use calc if you include margins **/
    height: 100px; /** whatever height you want **/
}

li > img { /** demo only - because of image sizes **/
    width: 100%;
    height: 100%;
}

HTML：

<ul>
  <li data-src="whatever">
      <img src="http://www.gordonrigg.com/the-hub/wp-content/uploads/2015/06/little_cute_cat_1920x1080.jpg" />
  </li>

  <li data-src="whatever">
      <img src="http://rufflifechicago.com/wp-content/uploads/cat-treats.jpg" />
  </li>

  <li data-src="whatever">
      <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
  </li>

  <li data-src="whatever">
      <img src="http://animalia-life.com/data_images/cat/cat8.jpg" />
  </li>

  <li data-src="whatever">
      <img src="http://www.catprotection.com.au/wp-content/uploads/2014/11/5507692-cat-m.jpg" />
  </li>

</ul>

Answer 3

您正在寻找一些简单的CSS，有多种方法可以解决这个问题，最简单的方法是：

<style type="text/css">
  ul.thumbs li{
    float:right;
  }
</style>
<ul class="thumbs">
  <li data-src="img1.jpg">
      <img src="thumb1.jpg" />
  </li>
  <li data-src="img2.jpg">
      <img src="thumb2.jpg" />
  </li>
</ul>

您还可以将ul设置为display:table-row，将li设置为display:table-cell，以便它们均匀分布并填充{{1}中允许的空间}}

基于你的编辑，你需要一些更复杂的东西，不知道你正在使用哪个插件，或者它是如何工作的，你可以尝试这种方法（使用一点点jQuery）：

ul

$(document).ready(function(){
        $('li').click(function(){
          $(this).parent().find('.selected').removeClass('selected');
          $(this).addClass('selected');
   		 });
    });

ul{
    padding-top:405px;
    position:relative;
}
li{
    height:100px;
    width:100px;
    float:left;
    background:blue;
}
li.selected{
    background: red;
    position: absolute;
    top: 0;
    height: 400px;
    width: 400px;
}

我可以在单个无序列表中创建一个中断吗？

3 个答案: