html - 如何响应式地划分未知数量的 li 元素

Question

我正在开发我的响应式投资组合网站，但我遇到了一些问题。当我有一个投资组合元素时，我想在更大的图像下显示缩略图，单击(onclick)时会更改大图像。问题是，我不知道如何将它们平均分配到 div 中。此外，li 元素的数量对于其他投资组合元素也会有所不同。有没有人知道解决这个问题的方法，最好是在 CSS 中？非常感谢! - 简

HTML代码:

<article class="row">
  <div class="seven columns">
    <div id="mediadiv">
      <video controls autoplay><source src="mp4/ApocolyspeWow1080p.mp4" type="video/mp4"></video>
    </div>

    <ul class="thumbnaillist">
      <li><img src="http://placehold.it/100x100" onclick="changeMediaDiv('http://janvandijk.me/img/static/prof.jpg');"/></li>
      <li><img src="http://placehold.it/101x100" onclick="changeMediaDiv('mp4/ApocolyspeWow1080p.mp4');" /></li>
      <li><img src="http://placehold.it/100x100" onclick="changeMediaDiv('https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg');" /></li>
      <li><img src="http://placehold.it/100x100" onclick="changeMediaDiv('R2lZH4RYTCY.youtube');" /></li>
      <li><img src="http://placehold.it/100x100" onclick="changeMediaDiv('');" /></li>
    </ul>
  </div>
  <div class="five columns">
    <h3>Lalalalala</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt, repellat aperiam quasi sunt officia expedita beatae cupiditate maiores repudiandae nostrum reiciendis facere nemo ut temporibus asperiores ad iusto. Facere illo rem soluta consequatur.</p>
  </div>
</article>

Answer 1

display:table 用于 UL 和 table-cell 用于 LI 元素

.seven{position:relative;width:56%;}
video{display:block;width:100%;}

.thumbnaillist{
  padding:0;
  display:table;
  table-layout:fixed;
  width:100%;
}
.thumbnaillist li{
  display:table-cell;
}
.thumbnaillist li img{
  width:100%;
  vertical-align:top;
}

<div class="seven columns">
    <div id="mediadiv">
      <video controls autoplay><source src="mp4/ApocolyspeWow1080p.mp4" type="video/mp4"></video>
    </div>

    <ul class="thumbnaillist">
      <li><img src="http://placehold.it/100x100/cf5"></li>
      <li><img src="http://placehold.it/101x100/5fc"></li>
      <li><img src="http://placehold.it/100x100/55c"></li>
      <li><img src="http://placehold.it/100x100/c55"></li>
      <li><img src="http://placehold.it/100x100/f5c"></li>
    </ul>
</div>