Question

我试图完成一个嵌套的可滚动布局，它有一个左侧边栏和一个水平分割的右侧容器。以前我使用的是ui-layout，这仍然很新（而且还有错误）。

<body ng-controller="AppCtrl" layout="row" layout-fill>
    <div flex="33" class="blue">left</div>
    <div flex="66" class="green" layout-fill>
      <div layout="column" layout-align="start start">
        <div flex="25">above</div> 
        <div flex="75">below</div>
      </div>
    </div>
</body>

为什么我无法正确查看嵌套列布局？我希望above水平占据页面右侧的25％，below其余75％。我做错了什么，或者甚至可以使用布局指令？

Answer 1

更改

Giv

到

<div flex="66" class="green" layout-fill>
  <div layout="column" layout-align="start start">
    <div flex="25">above</div> 
    <div flex="75">below</div>
  </div>
</div>

原始代码不起作用的原因是因为layout =“column”不会自动将高度填充到其包含元素的100％。

在行布局内嵌套列布局

1 个答案: