1. 首頁
  2. 問答
  3. 爲水平佈局中的所有卡設置相同的高度

爲水平佈局中的所有卡設置相同的高度

2017-02-09 53 views
0

我有一個水平佈局，其中有3張md卡。每張卡都有不同的內容。問題是，根據每張卡內容的數量，卡的高度會發生變化。爲水平佈局中的所有卡設置相同的高度

我想要做的是讓最後2張卡片的高度與第一張卡片（它有很多內容）相同。

我試着在flex中設置layout =「column」，就像在另一篇文章中建議的一樣，但它並沒有爲我工作。

我該如何解決？

CodePen：http://codepen.io/anon/pen/YNJYrp

HTML：

<!DOCTYPE html> 
<html ng-app="myapp" xmlns:width="http://www.w3.org/1999/xhtml"> 
<head> 
    <title><%= title %></title> 
    <link rel='stylesheet' href='/stylesheets/style.css'/> 
</head> 


<body layout="column"> 
<!-- ANGULAR MATERIAL DEPENDENCIES --> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script> 


<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 

<!-- ANGULAR MATERIAL DEPENDENCIES END--> 


<md-content> 
<div ng-controller="StudentRegisterationController"> 

    <md-content class="title-margin-top"> 
     <div layout="row" layout-align="center center"> 

      <md-card id="mainCard" flex="45"> 
       <div layout="row" layout-align="center center" flex="100"> 
        <img class="profile_image" src="/images/ic_account_image_placeholder.svg" aria-label="android "> 
       </div> 
       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="First Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Last Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Home Address" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Contact Number" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Doctor Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Doctor Number" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="90"> 
         <input required type="text" placeholder="Allergies" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container style="margin-left: -18px" class="md-block" flex="40"> 
         <input required type="text" placeholder="Age" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <div flex="40" layout="row" layout-align="start center" style="margin-left: -18px"> 
         <md-datepicker ng-model="myDate" md-placeholder="Birth Date" 
             md-open-on-focus> 
         </md-datepicker> 
        </div> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container style="margin-left: -18px" flex="40"> 
         <label>Age Group</label> 
         <md-select required ng-model="ageGroup" ng-change="fetchObservationsListFromServer()"> 
          <md-option ng-value="ageGroup" ng-repeat="ageGroup in ageGroupList">{{ ageGroup }} 
          </md-option> 
         </md-select> 
        </md-input-container> 

        <span flex="10"></span> 

        <div flex="40" layout="row" layout-align="start center" style="margin-left: -18px"> 
         <md-datepicker ng-model="myDate" md-placeholder="Registration Date" 
             md-open-on-focus> 
         </md-datepicker> 
        </div> 
       </div> 

       <!--<div layout="row" layout-align="center center" flex="100"> 
        <span flex="5"></span> 
        <md-input-container class="md-block" flex="23"> 
         <input required type="text" placeholder="Allergies" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="23"> 
         <input required type="text" placeholder="Doctor Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="23"> 
         <input required type="text" placeholder="Doctor Number" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="5"></span> 

       </div>--> 
      </md-card> 

      <md-card flex="35"> 
       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Father First Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Father Last Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Mother First Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Mother Last Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Guardian First Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Guardian Last Name" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Father ID Card" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Mother ID Card" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 

       <div layout="row" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Parent's Email Address" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 
      </md-card> 

      <md-card flex="20"> 
       <div layout="column" layout-align="center center" flex="100"> 
        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Child ID" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 

        <span flex="10"></span> 

        <md-input-container class="md-block" flex="40"> 
         <input required type="text" placeholder="Password" 
           ng-model="bookName" 
           enter-pressed=""/> 

         <div ng-messages="$error"> 
          <div ng-message="required">This is required.</div> 
         </div> 
        </md-input-container> 
       </div> 
      </md-card> 
     </div> 

     <div class="title-margin-top" layout="row" layout-align="center center" flex="100"> 
      <md-button class="md-raised md-primary" flex="none" type="submit" 
         ng-click="onSubmitClicked(myForm)">Submit 

       <md-tooltip md-direction="left"> 
        Send data to server 
       </md-tooltip> 
      </md-button> 

      <span flex="2"></span> 

      <md-button class="md-raised md-primary" flex="none" type="submit" 
         ng-click="onSubmitClicked(myForm)">Delete 

       <md-tooltip md-direction="left"> 
        Delete From Server 
       </md-tooltip> 
      </md-button> 
     </div> 
    </md-content> 
</div> 
</md-content> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
<script src="/javascripts/newCode/accounts/Controller_StudentRegisteration.js"></script> 
    </body> 
    </html>

的Javascript：

var mainApp = angular.module("myapp", ['ngMaterial']); 

mainApp.config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('default').foregroundPalette[3] = 'rgb(83, 109, 254)'; 
}); 

mainApp.controller('StudentRegisterationController', function($scope, $http, $mdToast, $log) { 
    $log.log(" STUDENT REGISTRATION"); 
});

CSS：

.profile_image{ 
    min-width: 36px; 
    max-width: 150px; 
    width: 150px; 
    height: auto; 
}

來源

2017-02-09 user2498079

回答

2

您可以簡單地套用在括號下面的CSS規則t容器

.layout-row{ 

    display: flex; 
    align-items: stretch; 

}

來源

2017-02-09 13:35:04 void

+0

但是這會影響整個網站的佈局行。我希望它只在特定頁面中起作用。請原諒我在css中的文盲 – user2498079

+0

給該元素一個不同的類名，然後將css應用於該類名。 – void

相關問題

 相關問題