我有一个水平布局，其中我有3张卡片。每张卡片中都有不同的内容。问题是，根据每张卡中的内容量，卡的高度会发生变化。
我要做的是让最后两张卡与第一张卡（其中包含大量内容）的高度相同。
我已尝试使用flex设置layout =“column”，如另一篇文章中所建议的那样但它对我没用。
我该如何解决？
CodePen：http://codepen.io/anon/pen/YNJYrp
HTML：
new module使用Javascript：
<!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>
CSS：
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");
});
答案 0 :(得分：4)
您只需在父容器上应用以下CSS规则
即可.layout-row{
display: flex;
align-items: stretch;
}