• Logitech G305 Lightspeed inceleme!

    Kaliteli oyuncu ekipmanları ile tanıdığımız Logitech markasının fiyat performans oyuncu faresi G305 Lightspeed modelini inceledik.

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
440
Reaksiyon puanı
255
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,539
Reaksiyon puanı
5,079
Puanları
113
Margin veya padding bottom ı sıfır ver.

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

Son mesajlar

Üst