角度素材でmdカードのメイン画像の上に画像を追加する方法

Question

角度素材でmdカードのメイン画像の上にさらに3枚の画像を追加したいと思います。トラフのインターネットを検索して、それに適切な答えが見つかりませんでした。私は本当に欲しいものを示すためにイメージを付けました。

ありがとうございました。ありがとう、

Answer 1

角材が提供するフレックスボックスの機能を使用して、必要なレイアウトを実現できます。

ドキュメント - https://material.angularjs.org/latest/layout/introduction

は、例えば、以下はあなたがdivタグで、それはカードに追加するまっすぐでなければなりません探しているものを実現します。 CodePen - 私はこれは私がそれを行うだろうかあるCSSファイル

<div layout="row" style="padding: 10px; background-color:green"> 
    <div flex style="height:300px; width: 250px;"></div> 
    <div layout="column" style="width: 100px; "> 
     <div style="height: 100px; margin: 5px 0px 5px 0px; background-color: white">1</div> 
     <div style="height: 100px; margin: 5px 0px 5px 0px; background-color: white">2</div> 
     <div style="height: 100px; margin: 5px 0px 5px 0px; background-color: white">3</div> 
    </div> 
</div> 

https://plnkr.co/MCj2bRj6C9PAGbOH9erL

Answer 2

にスタイリングを移動することをお勧めします。カードエフェクトにはmd-whiteframeを使用してください。

マークアップ

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" style="background:lightgrey; padding:100px"> 
    <div layout="row" flex="50" layout-align="center"> 
    <md-whiteframe class="md-whiteframe-1dp" flex="50" style="background:white" layout="column"> 
     <div style="background:darkgreen" flex="80" layout="row" layout-align="end"> 
     <div flex="20" layout-margin layout="column"> 
      <div style="background:red" flex> 
      </div> 
      <div style="background:yellow" flex> 
      </div> 
      <div style="background:blue" flex> 
      </div> 
     </div> 
     </div> 
     <div layout="row" layout-align="center center" flex> 
     <label style="font-size:30px">Products</label> 
     </div> 
    </md-whiteframe> 
    </div> 
</div>