Within my Angular2 application, I am facing an issue with displaying multiple instances of a child component - app-video-container - in a grid layout using inline-block. The parent component generates these instances using an ngFor loop but they appear stacked vertically instead of in a grid format. Interestingly, substituting inline-block with float:left resolves the problem and renders the videos in a grid as desired. However, for specific requirements, I need to use inline-block rather than float. What am I missing in my implementation? Why does float property work while inline-block fails to produce the expected result? Here is a simplified version of my code:
Parent component HTML:
<div *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
CSS for parent component
:host {
background-color:black;
position:relative;
}
App-video-container component HTML:
<div class="videoContainer">
<iframe [src]="videoURL" allowfullscreen></iframe>
</div>
App-video-container component CSS
.videoContainer {
width:20%;
height:100px;
margin-left:4%;
margin-bottom: 20px;
display:inline-block;
}