Angularjs材料一行2列答案

【问题标题】：Angularjs material one row with 2 columnsAngularjs材料一行2列
【发布时间】：2017-04-02 13:23:02
【问题描述】：

我正在努力实现这一目标，但不知道如何：

|-------------80%---------------------|----20%---|

一行两列，具有特定宽度。

|-------------------------------------|----//---|
|-------------------------------------|----//---|
|-------------------------------------|----//---|

不像我的例子。

我怎样才能实现它？

【问题讨论】：

【解决方案1】：

在您导入 AngularJS 和 Angular Material（包括 css 文件）后，您需要在您的 AngularJS 应用程序中导入 Angular Material。为此，您需要在 AngularJS 模块中添加“ngMaterial”提供程序，如下所示：

var app = angular.module("myApp", ["ngMaterial"]);

（如果跳过这部分，它将不起作用）。

然后你可以编写你的HTML代码如下

<div layout="row" layout-wrap>
    <div flex="80">80%</div>
    <div flex="20">20%</div>
</div>

这将创建一个充当容器的 div。它将包含您要显示的元素，它们将排列成一行，如有必要，它们将显示在第二行中。在 flex 属性中，您可以指定元素的宽度（以百分比形式）与容器的宽度相比。

显然，您可以根据需要更改 Angular 模块的名称和 html 元素的数量/宽度。

在那里你可以看到一些例子和一些documentation

【讨论】：

谢谢！如果我想向页面添加导航（向上菜单），我该如何设置垂直空间？（菜单 20%，其余 80%）？
@E.Meir 您可以简单地使用工具栏。它将被放置在屏幕顶部，如果您向其添加 css 属性position: fixed;，它将始终保持在顶部，即使您滚动长页面时也是如此。它还将为您完成所有工作:) Here the demos and the documentation
谢谢！ <div layout="row" > <div flex="70" **layout-align="end left"**><div flex="30" **layout-align="center end"**> 怎么样？如何将每一列设置为特定方向？
@E.Meir 如果您的意思是“如何更改对齐方式？”答案很简单，只需更改属性layout-align 的值即可。可能的值显示在docs
是的，我的意思是-所以我在上一条评论中写的内容应该可行吗？ layout-align [属性假设在 div 上？

【解决方案2】：

首先你需要声明：

md-cols网格中的列数。

在你的情况下 (8+2=10)：

<md-grid-list md-cols="10" ...

那么你的物品：

<md-grid-tile md-colspan="8">...</md-grid-tile>

<md-grid-tile md-colspan="2">...</md-grid-tile>

【讨论】：