如何角材料

Question

我想補充MD卡的角度material.I搜索低谷互聯網主圖像上方的另一個3個圖像添加上述MD卡主圖像更多的圖像，我沒有找到該合適的解決辦法。我附上了一張圖片來展示我真正想要的東西。

任何幫助高度讚賞。謝謝，

Answer 1

您可以使用Angular Material提供的柔性盒功能來實現您想要的佈局。

文檔 - https://material.angularjs.org/latest/layout/introduction

例如，下面將實現你在找什麼用div的，它應該是直截了當地添加到卡上。我建議樣式移動到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

這是我會怎麼做 - CodePen。卡效應使用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>