Я не могу заставить компонент отображаться как встроенный блок в Angular2

Question

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

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

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

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

Answer 1

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>