我是 Angular 材料设计的新手。我想设计一个将日期分成三列的表格。我创建了两个表单。第一种形式包含两个 div,第二种形式包含一个 div。我希望每个 div 在屏幕的单独列中,三个 div 应该平均划分屏幕宽度,比如说 100% 宽度的 33.33%,但我只在一列中获得所有 div。下面给出的是我写的代码:
<body ng-app="inputErrorsAdvancedApp">
<div ng-controller="AppCtrl" layout="column" ng-cloak>
<div md-content layout-padding>
<form name="userForm">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>First Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Last Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Date Of Birth</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Gender</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Mobile</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Address</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>City</label>
<input>
</md-input-container>
</div>
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>Country</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>State</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Phone</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Mobile</label>
<input>
</md-input-container>
</div>
</form>
<form name="security">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>old password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>New Password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Re-Enter Password</label>
<input>
</md-input-container>
</div>
</form>
</div>
这是我创建的页面的 plunker
https://plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview
请帮助我解决此问题。