Gece baykuşu
Doçent
- Katılım
- 13 Ocak 2019
- Mesajlar
- 500
- Reaksiyon puanı
- 291
- 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;
}
