Question

我遇到角度材质布局问题..

得到了这个：

这个只是为了显示整个HTML

<div id="MainLayout" layout="column" flex style="height: 100%; overflow: hidden">

  <div id="pageHeader" layout="row">
    <div layout="column" flex>
      <div layout="row" flex>
        <img ng-repeat="icon in main.social" class="social" src="{{icon.path}}"/>
      </div>
      <div layout="row" flex></div>
    </div>
</div>

关于这个块：

<div id="LogoDisplay" layout="row" flex="50" ng-style="main.styles.text" style="background: #F9F9F9">
    <div layout="column" layout-align="center center" flex fill>
      <div id="LogoImage" layout="row" layout-align="center center"><img src="assets/images/user-foto-logo.png" style="???"></div>
      <div id="LogoTitle" layout="row" layout-align="center end">User Name</div>
      <div id="LogoText" layout="row" layout-align="center start">Job Title</div>
    </div>
</div>

至少我得到了这个

<div id="ImageDisplay" flex="50" layout="row" layout-align="center center">
    <div ng-repeat="icon in main.icons">{{icon}}</div>
</div>

<div id="pageInfo" layout="row" style="background: #123; color: #FFFF88;">some info footage</div>

我用???标记了代码有我的问题，有4行，第1行有一些图标，＃4只是文字...... 第2行包含徽标和两行文本第3行包含几个徽标

我的问题：我希望第2行和第3行填充50％的高度。徽标应占第2行的50％，两个文本应符合徽标的宽度......

Angular - Matierial Layout - 如何将图像设置为其父级高度的50％（行布局）

0 个答案: