Question

在我的Angular2应用程序中，我有一个父组件，该组件通过ngFor循环生成许多子组件的实例-app-video-container-本质上是一个内部装有iframe的div。我希望这些视频以网格类型的布局显示。我正在尝试使用内联代码块来完成此操作，如下所示，但它不起作用，它仅显示为单个视频列。如果我使用float：left而不是inline-block，则会以我想要的方式在网格中显示视频，但是我需要能够使用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>

App-video-container组件CSS

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

Answer 1

inline-block不能按预期方式工作，因为每个.videoContainer div周围都有一个div。

从内部div中删除videoContainer类

<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>

我无法在Angular2中将组件显示为行内块

1 个答案: