Yardım Container Div Yükseklik Verince Flex Oln Divler Arası Boşluk Artması

Bu konuyu okuyanlar

Gece baykuşu

Asistan
Katılım
13 Ocak 2019
Mesajlar
498
Reaksiyon puanı
292
Puanları
63
Merhabalar Ana div olan container dib yüksekli verince flex özelliği olan divler arasında alt boşluk artıyor. Bunun oluşmasını nasıl engellerim.
HTML:
 <div class="doctor-container">
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">/div>
 <div class="doctor-branch"></div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name"></div>
 <div class="doctor-branch"></div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 <div class="doctor-box">
 <div class="doctor-img">
 <img src="img/doctor.png" class="doctor-imgfor">
 </div>
 <div class="doctor-Info">
 <div class="doctor-name">Deneme Deneme</div>
 <div class="doctor-branch">Deeneme</div>
 </div>
 </div>
 </div>


CSS:
.doctor-container
{
 width: 1300px;
 display: flex;
 flex-wrap: wrap;
 position: relative;
 top: 20px;
 left: 20px;
 background-color: antiquewhite;
 height: 400px;
}
.doctor-box
{
 width: 466px;
 max-width: 266px;
 max-height: 300px;
 background-image: linear-gradient( 178deg, rgba(0, 142, 196, 0) 0%, rgba(0, 103, 144, 0.89) 64%, #005A7D 100%);
 position: relative;
 left: 15px;
 top: 15px;
 margin: 27px;
 border-radius: .8rem;
 height: 320px;
}

.doctor-img
{
 max-width: 270px;
 height: 180px;
 background-color: rgba(0, 144, 201, 0.1);
 border-radius: 0.8rem;
}
.doctor-imgfor
{
 max-width: 100%;
 transform: translate(21%, 17%);
}
.doctor-Info
{
 max-width: 100%;
 height: 100px;
 color: #fff;
}
.doctor-name
{
 width: 100%;
 height: 55px;
 position: relative;
 top: 10px;

 line-height: 50px;
 text-align: center;
}
.doctor-branch
{
 width: 100%;
 height: 50px;
 position: relative;
 line-height: 50px;
 text-align: center;
}
 

Son mesajlar

Üst