Блог

В моем приложении Angular2 у меня есть родительский компонент, который с помощью цикла ngFor генерирует несколько экземпляров дочернего компонента — app-video-container, который по сути является div с iframe внутри. Я хочу, чтобы эти видео отображались в виде макета типа grid. Я пытаюсь использовать встроенный блок для достижения этой цели, как показано ниже, но это не работает, он просто отображается в виде одного столбца видео. Если я использую float: left вместо встроенного блока, это отобразит видео в сетке так, как я хочу, но мне нужно иметь возможность использовать встроенный блок вместо этого. Что я делаю не так? Почему float работает, но не inline-block? Вот сокращенная / упрощенная версия моего кода:

Родительский компонент HTML:

 <div *ngFor="let video of videos">
   <app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
  

CSS для родительского компонента

 :host {
     background-color:black;
     position:relative;
 }
  

HTML-компонент App-video-container:

 <div class="videoContainer">
    <iframe [src]="videoURL" allowfullscreen></iframe>
</div>
  

CSS компонента приложения-видео-контейнера

 .videoContainer {
width:20%;
height:100px;
margin-left:4%;
margin-bottom: 20px;
display:inline-block;
}
  

inline-block работает не так, как вы ожидаете, потому что у вас есть div, обернутый вокруг каждого .videoContainer div.

Удалите videoContainer класс из внутреннего div

 <div>
    <iframe [src]="videoURL" allowfullscreen></iframe>
</div>
  

и добавить его во внешний div

 <div class="videoContainer" *ngFor="let video of videos">
   <app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>