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

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

我建议在 li 上使用 float: left 和 display: block，在 li:第一个 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。