私のAngular2アプリには、親コンポーネントがあります。これは、ngForループを介して、子コンポーネントのインスタンスをいくつか生成します（app-video-container）。これは、基本的にiframeを内部に持つdivです。これらのビデオをグリッドタイプのレイアウトで表示したいと思います。以下のように、インラインブロックを使用してこれを実現しようとしていますが、機能せず、ビデオの単一列として表示されるだけです。inline-blockの代わりにfloat：leftを使用すると、ビデオが希望どおりにグリッドに表示されますが、代わりにinline-blockを使用できるようにする必要があります。私は何が間違っているのですか？floatは機能するが、インラインブロックは機能しないのはなぜですか？これが私のコードの要約/簡略化バージョンです：
親コンポーネントのHTML：
<div *ngFor="let video of videos">
<app-video-container>[videoURL]=video.videoURL</app-video-container>
</div>
親コンポーネントのCSS
:host {
background-color:black;
position:relative;
}
App-video-containerコンポーネントの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;
}
inline-block各.videoContainerdivの周りに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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加