我试图在一张md卡中获得2个内容“盒子”。一个用户可以输入一些文本字段,另一方面我想要一个标识。
<md-card ng-controller="AuthenticationController">
<md-content class="left_side" layout-align="center center">
</md-content>
<md-content class="right_side" layout-align="right">
</md-content>
</md-card>
CSS
.left_side {
height: 100%;
width: 50%;
background-color: blue;
display: flex;
}
.right_side {
height: 100%;
width: 50%;
background-color: red;
display: flex;
margin-right: 0px;
}
我认为这很简单,但不知怎的,我一直在想错,因为我不明白。
答案 0 :(得分:0)
这对我来说很有把戏
<div ng-controller="AppCtrl" class="md-padding selectdemoBasicUsage" ng-cloak="" ng-app="MyApp" id="container">
<md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center">
<div flex-xs flex-gt-xs="70" layout="column" layout-align="center center">
<md-card layout="row" ng-controller="AppCtrl" layout-align="center center">
<md-content class="left_side" layout-align="center center" layout="column">
<md-content id="headerTxt">Welkom!</md-content> <br>
<md-content id="formContent" md-colors="orange">
<form id="formDetails" ng-submit="" layout="column">
<md-input-container class="md-default-theme-theme md-input-has-value">
<input autofocus="" autocomplete="off" ng-model="credentials.username" required="" id="input_0" aria-invalid="false" style="">
<div class="md-errors-spacer"></div>
<label translate="" class="capitalize ng-scope" for="input_0">Gebruikersnaam</label>
</md-input-container>
<md-input-container>
<input type="password" ng-model="credentials.password" required="" id="input_1" aria-invalid="false" style="">
<div class="md-errors-spacer"></div>
<label translate="" for="input_1">Wachtwoord</label>
</md-input-container>
<div layout="row" layout-align="end center" class="layout-align-end-center layout-row">
<button class="md-primary md-raised capitalize md-button md-default-theme-theme md-ink-ripple" type="submit"
ng-disabled="authenticationForm.$invalid || authenticationForm.proccess.$state.busy">INLOGGEN</button>
</div>
</form>
</md-content>
</md-content>
<md-content class="right_side" layout-align="center center">
<img width="100px" height="100px">
</md-content>
</md-card>
</div>
</md-content>
</div>