将屏幕分为三栏角材设计

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

请帮助我如何解决这个问题。

来源

2016-03-14 rajani chowdhary

请发表您的编辑到我的答案作为评论或新的问题。我很乐意帮助！ – henrikmerlander

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

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

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

来源

2016-03-14 07:12:39 henrikmerlander

非常感谢您的回答。我按照您的指示将数据分成了三列，但三列不适用于整个桌面屏幕。这里是我更新的猛击https://plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview –

您可以在窗体上设置flex =“50”以使它们填充页面。 – henrikmerlander

我尝试应用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>

欲了解更多信息，请访问角材公司官方网站。

来源

2017-07-07 12:58:10

将屏幕分为三栏角材设计

回答

相关问题