我怎么能给一个特殊的孩子更大的身高,比他父母的身高更大

时间:2020-05-15 11:23:42

标签: css angular flexbox grid

我有这个div.Picute在这里: https://ibb.co/kSb3z7m 带有类description的div是右侧的文本区域,它是match-overview__input-section类的第三个子类。 我希望该div从下拉菜单的开头到输入您的投注输入开始。如何实现此目的?问题在于,此处的文本区域div共享父级的高度,但是父级的高度在那里很好,并且是由justify-content:space-evenly!important;组成的。在div的根上。

//html


      <div class="col-md-6 col-lg-6">


        <div class="match-choosing-dropdown">
          <select id="dropdown-match-picker" [formControl]="control" (change)="navigateToSection('match-info-section')"
            (ngModelChange)="selectedMatchHandler($event)">
            <option *ngFor="let match of matches; let i = index" [ngValue]="match">{{match.home_team_name}} VS
              {{match.away_team_name}}</option>
          </select>
        </div>


        <div class="match-overview__input-section">
         <div class="match-overview__input-section-wrapper">
          <div class="match-overview__input-section-item-home">
            <input class="home-team-input" type="number"
              [(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points" name="homeTeamPrediction"
              id="home-team" min="0" max="1000" />
          </div>
          <div class="match-overview__input-section-item">
            <input class="away-team-input" type="number"
              [(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points" name="awayTeamPrediction"
              id="away-team" min="0" max="1000" />
          </div>
         </div>
          <div class="description">
            <textarea></textarea>
          </div>
        </div>


        <div class="staked-amount">
          <input placeholder="Enter your bet" class="staked-amount__input" type="number"
              [(ngModel)]="predictionService.predictionFormModel.staked_amount" name="staked_amount"
              id="staked_amount" min="1" />
        </div>


        <div class="create-prediction">
          <button class="create-prediction__button btn btn-primary"
          (click)="navigateToSection('info-and-error-section')">Create</button>
        </div>


      </div>
//css


.col-md-6 {
    display: flex !important;
    justify-content:space-evenly !important;
    align-items: space-between;
    flex-direction: column;
    height: 300px !important;
    background-color: #151720;
    border:1px solid blue;
}

.create-prediction , .staked-amount  {
    width: 163px !important;
    display: flex;

    &__button {
        color:white;
        flex-basis: 274px !important;
    }
}

.create-prediction {
    // margin-top:20px;
}

.match-choosing-dropdown {
    width: 161px !important;
    display: flex;

    & select {
        flex-basis: 274px !important;

        & option {
            color:black;
        }
    }
}

.staked-amount__input {
    display: flex;
    flex-basis: 170px !important;
}

.match-overview__input-section {
    display:flex;
    justify-content: space-between;

    #{&}-item {
        flex:1;
    }

    #{&}-item-home {
        margin-right: 28px;
    }

}

.match-overview__input-section-wrapper {
    display: flex;
    border:1px solid brown;
    align-items: center;
}

0 个答案:

没有答案