将屏幕分成三列 Angular Material Design答案

【问题标题】：Dividing the screen into three columns Angular Material Design将屏幕分成三列 Angular Material Design
【发布时间】：2016-03-14 05:17:01
【问题描述】：

我是 Angular Material Design 的新手。我想设计一个表格，将日期分成三列。我创建了两个表格。第一种形式包含两个 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>

这是我创建的页面的插件

https://plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview

请帮助我解决此问题。

【问题讨论】：

请将您的编辑作为评论或新问题发布到我的答案中。我很高兴能提供帮助！

标签： angularjs angularjs-material

【解决方案1】：

在父元素上使用layout="row"。例如

<div layout="row" md-content layout-padding> ...forms... </div>

文档链接：https://material.angularjs.org/latest/layout/container

【讨论】：

非常感谢您的回答。我按照您的指示将数据分为三列，但三列不适合桌面的整个屏幕。这是我更新了plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview
您可以在表单上设置 flex="50" 以使它们填满页面。
我尝试过应用 flex 属性，但它仍然不适合桌面的整个屏幕。感谢您的指导。

【解决方案2】：

你的 flex 就像分割屏幕。你可以这样使用。屏幕必须划分为 100%。如果您使用 3 div 或 md-input-container flex 应该是 33。即 100/3。如果你有 4 个 div，你应该将屏幕 100% 分成 4 个相等的部分。

    <div layout-xs="column">  
              <md-input-container class="md-block" flex="33">
                <label>First Name</label>
                <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
               <label>Last Name</label>
               <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
                <label>Date Of Birth</label>
                <input>
              </md-input-container>
</div>

欲了解更多信息，请访问 Angular Material 官方网站。

【讨论】：