You can use the flex box features provided by Angular Material to achieve the layout you want.
Docs - https://material.angularjs.org/latest/layout/introduction
For example, the following will achieve what you are looking for with divs, it should be straight forward to add to a card. I recommend moving the styling to a CSS file
<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>
This is how I would do it - CodePen . Using md-whiteframe
for the card effect.
Markup
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.