html - div 浮动左网格项丢失

Question

我的 div 向左浮动，宽度均为 33:33%，并且无法正确显示。我不知道为什么。

这是页面演示：

https://tobiasnielsendesigns.com/doxafilm/film/

这是代码：

.mpp-playlist-item {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  float: left;
  width: 33.33%
}

.mpp-playlist-item .mpp-thumb,
.mpp-playlist-item .mpp-image {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

<div class="mpp-playlist-content">
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47571818_275651269807296_726827746314944512_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Chaplon-Tea-in-English-2.mp4"
    data-title="Chaplon" data-target="_blank" style="margin: 0px;width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47571818_275651269807296_726827746314944512_n.jpg"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47432813_1904362906349022_3286639803898003456_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/10/Lighting-Metropolis.mp4"
    data-title="Lighting metropolis" data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47432813_1904362906349022_3286639803898003456_n.jpg"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/CPH-book.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Copenhagen-Book.mp4"
    data-title="CPH Book" data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/CPH-book.jpg"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47573179_752046408476410_3175606446800764928_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Karamelleriet-1.mp4"
    data-title="Karamelleriet" data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47573179_752046408476410_3175606446800764928_n.jpg"></div>
   </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47477639_2245917819064779_8344583275250974720_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Metropolis_-by-Light-conference.mp4"
    data-title="Lighting metropolis konference" data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47477639_2245917819064779_8344583275250974720_n.jpg"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47575800_297900987527222_8526911603403128832_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/IQ-tatoo.mp4"
    data-title="IQ tatoo" data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47575800_297900987527222_8526911603403128832_n.jpg"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47504614_1702949066679527_2100144376729567232_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Bilfri-søndag.mp4"
    data-title="Lets Go" data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47504614_1702949066679527_2100144376729567232_n.jpg"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Gate-21.mp4" data-title="Gate 21"
    data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47510101_596484184104977_2186712693870690304_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Voksi-30-års-jubilæum.mp4"
    data-title="Voksi" data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47510101_596484184104977_2186712693870690304_n.jpg"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Special-Hockey-Denmark.mp4"
    data-title="Hockey" data-target="_blank" style="margin: 0px;width: 31.2%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png"></div>
  </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47440573_379353389306985_1037288684212191232_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Trivsel-og-læring.mp4"
    data-title="Lejre kommune " data-target="_blank" style="margin: 0px; width: 33.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47440573_379353389306985_1037288684212191232_n.jpg"></div>
    </div>
  <div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47316548_547574659049579_6114587764987002880_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Bruunmunch.mp4"
    data-title="Bruun Munch " data-target="_blank" style="margin: 0px;width: 31.3333%;">
    <div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47316548_547574659049579_6114587764987002880_n.jpg"></div>
  </div>
</div>

标签： htmlcss