md-card 中的两个 md-content 彼此相邻

Question

我试图在一张 md 卡中获取 2 个内容 "boxes"。一个用户可以输入一些文本字段，而在另一侧我想要一个徽标。

<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;
}

我认为这很简单，但不知何故我一直想错了，因为我不明白。

Answer 1

这对我有用

<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>

md-card 中的两个 md-content 彼此相邻

Two md-content next to eachother in md-card

styling

angularjs

angular-material

md-card