Question

我正在努力实现这一点，并且无法解决：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="buttons">
 <a href="#" id="2" class="mybutton myred" >Div 2</a>
 <a href="#" id="1" class="mybutton myblue">Div 1</a>
</div>

<div id="pages">
  <div class="1 mydivshow">
    <a href=".menu1page">Menu1</a>
  </div>
  <div class="1 mydivshow">
    <a href=".menu2page">Menu2</a>
  </div>
  <div class="1 mydivshow">
    <a href=".menu3page">Menu3</a>
  </div>
  <div class="2 mydivhide">
    <a href=".menu1page">Home</a>
  </div>
  <div class="2 mydivhide">
    <a href=".menu2page">About</a>
  </div>
  <div class="2 mydivhide">
    <a href=".menu3page">Contact</a>
  </div>
</div>

一行，包含2列，具有特定宽度。

我不明白什么，列（在材料中的用法）在我看来像行＆gt;在行

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

而不是我的例子。

我怎样才能实现它？

Answer 1

导入AngularJS和Angular Material（包括css文件）后，需要在AngularJS应用程序中导入Angular Material。要做到这一点，你需要这样做

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

在JavaScript脚本中（如果不这样做，它将无效）。

然后您可以将HTML代码编写为

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

这将创建一个仅作为容器的div。它将包含您要显示的元素，它们将在一行中对齐，如有必要，它们将显示在第二行中。在flex属性中，您可以指定元素的宽度（以百分比表示）与容器的宽度进行比较。

显然，您可以更改Angular模块的名称以及html元素的数量/宽度。

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

Answer 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>

Codepen Sample - Angular Material Docs

Angularjs材料一行有2列

2 个答案: