我有这个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;
}