Div float left grid item отсутствует

У меня есть 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>

есть небольшая разница в высоте ... вы должны очищать поплавок через каждые 3 элемента или использовать что-то еще, кроме поплавка

— 06.12.2018 00:46

Могу ли я избежать этого, установив одинаковую высоту для каждого элемента?

— 06.12.2018 13:05

да, вы можете, или просто очистите float или измените на встроенный блок, как описано в дубликате

— 06.12.2018 13:05

1. Я не уверен, как мне легко очистить float каждый -nth элемент (это динамическая сетка)? 2. При использовании встроенного блока мне приходится иметь дело с удалением пробелов между ними.

— 06.12.2018 13:16

тогда используйте flexbox, это будет намного проще

— 06.12.2018 13:17

html css

06.12.2018 00:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Другие вопросы по теме

Центрирование текста на вертикальном индикаторе выполнения (абсолютное положение)

Сделайте часть обтекания абзаца над плавающим изображением

Диалог начальной загрузки с выравниванием заголовка по правому краю

Колода карт Boostrap прозрачна и не работает

Выравнивание текста работает для одного тега, но не для другого?

Запрос мобильного мультимедиа переопределяется значениями рабочего стола?

Нижняя граница не работает последнего гибкого дочернего элемента в нижней части контейнера

Масштабирование сетки на разных мобильных экранах

Измените свойство фонового изображения тела в зависимости от того, какой идентификатор и класс активны

Проблема в положении лежа относительно центрирования в центре экрана

Div float left grid item отсутствует

Другие вопросы по теме

Похожие вопросы