[英]Setting same height for all cards in Horizontal layout
我有一個水平布局，其中有3個md卡。 每個卡中都有不同的內容。 問題是，根據每張卡中的內容量，卡的高度會發生變化。
我想做的是使最后兩張卡的高度與第一張卡（具有很多內容）的高度相同。
我已經嘗試按照另一篇文章中的建議將其設置為layout =“ column”與flex，但它對我沒有用。
我該如何解決？
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規則
.layout-row{
display: flex;
align-items: stretch;
}
Bootstrap 5 卡需要使用 SwiperJS Slider 高度相同
[英]Bootstrap 5 Cards need to be all same height using SwiperJS Slider
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.