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;
}
但是这会影响整个网站的布局行。我希望它只在特定页面中起作用。请原谅我在css中的文盲 – user2498079
给该元素一个不同的类名，然后将css应用于该类名。 – void