如何角材料

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>