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
448
Reaksiyon puanı
258
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;
}
 

Senior_53

Profesör
Katılım
14 Eki 2020
Mesajlar
2,541
Reaksiyon puanı
5,102
Puanları
113
Margin veya padding bottom ı sıfır ver.

Dediğini de yam anlamadım ss atsana bi.
 
Üst