Yükseklik sonucu div taşıyor

Yeniçocuk

Kilopat
Katılım
30 Kasım 2018
Mesajlar
5.549
Makaleler
2
Çözümler
13
Merhabalar 3 divi yan yana sıralıyorum. Ortadaki div içeriğinden dolayı yükseklik değeri diğer divlere kıyasla biraz daha yüksek. Yükseklik düşürdüğüm zaman düzeliyor o Zaman'da divin içeriği bozuluyor bunu nasıl düzeltebilirim?

HTML:
<div class="healthCornerNewsDiv" style= "margin-left:48px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(128,194,196,0.75) 60%, rgba(128,194,196,1) 80%);">
<div class="imgHealthCornerDiv">
 <?php $conn = mysqli_connect("localhost", "root", "", "hospital");
 $image_details = mysqli_query($conn, "SELECT Image_Name FROM `imagestore` WHERE Image_Id=250");
 while ($row = mysqli_fetch_array($image_details)) {
 echo "<img style='border-top-left-radius: calc(.8rem - 1px);
 border-top-right-radius: calc(.8rem - 1px);' src='img/".$row['Image_Name']."' >";}?></div>
<div class="bransbody" style="height:85px; color:#fff;">
<div class="firstInfo">
<h6>
 <?php while($row1 = mysqli_fetch_array($imagetext7)):;?>
<?php echo $row1[3];?>
<?php endwhile;?>
</h6>
</div>

<div class="bransText">
<p style="margin-top:-19px;">
 <?php while($row1 = mysqli_fetch_array($imagetext8)):;?>
<?php echo $row1[4];?>
<?php endwhile;?>
</p>
</div>
</div>
</div>

<div class="healthCornerNewsDiv" style= "margin-left:48px; height:350px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(128,194,196,0.75) 60%, rgba(128,194,196,1) 80%); color:#fff;">
<div class="imgHealthCornerDiv">
 <?php $conn = mysqli_connect("localhost", "root", "", "hospital");
 $image_details = mysqli_query($conn, "SELECT Image_Name FROM `imagestore` WHERE Image_Id=251");
 while ($row = mysqli_fetch_array($image_details)) {
 echo "<img style='border-top-left-radius: calc(.8rem - 1px);
 border-top-right-radius: calc(.8rem - 1px);' src='img/".$row['Image_Name']."' >";}?>
 </div>
<div class="bransbody" style="height:85px;">
<div class="firstInfo">
<h6>
 <?php while($row1 = mysqli_fetch_array($imagetext9)):;?>
<?php echo $row1[3];?>
<?php endwhile;?>
</h6>
</div>

<div class="bransText">
<p style="margin-top:1px;">
 <?php while($row1 = mysqli_fetch_array($imagetext10)):;?>
<?php echo $row1[4];?>
<?php endwhile;?>
</p>
</div>

</div>
</div>

<div class="healthCornerNewsDiv" style= "margin-left:48px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(128,194,196,0.75) 60%, rgba(128,194,196,1) 80%);">
<div class="imgHealthCornerDiv">
 <?php $conn = mysqli_connect("localhost", "root", "", "hospital");
 $image_details = mysqli_query($conn, "SELECT Image_Name FROM `imagestore` WHERE Image_Id=252");
 while ($row = mysqli_fetch_array($image_details)) {
 echo "<img style='border-top-left-radius: calc(.8rem - 1px);
 border-top-right-radius: calc(.8rem - 1px);' src='img/".$row['Image_Name']."' >";}?></div>
<div class="bransbody" style="height:85px; color:#fff;">
<div class="firstInfo">
<h6>
 <?php while($row1 = mysqli_fetch_array($imagetext11)):;?>
<?php echo $row1[3];?>
<?php endwhile;?>
</h6>
</div>

<div class="bransText">
<p style="margin-top:-19px;">
 <?php while($row1 = mysqli_fetch_array($imagetext12)):;?>
<?php echo $row1[4];?>
<?php endwhile;?>
</p>
</div>
</div>
</div>

Normal görünüm hali.

yukseksorun.JPG

Sorunlu div yükseklik azaltıldığı zaman bozulan içerik.

Eki Görüntüle 1051499

duzeldi.JPG


CSS:
.healthCornerNewsDiv
{
    height:330px;
    width:350px;
    float: left;
    margin-left: 52px;
    margin-top: 50px;
    background: #d2f1f9;
    color: #005A7D;
    border-radius: .8rem;
}
.imgHealthCornerDiv
{
    width: 350px;
    height: 240px;
    float: left;
}

.imgHealthCornerDiv img
{
        border-top-left-radius: calc(.8rem - 1px);
    border-top-right-radius: calc(.8rem - 1px);
    width: 350px;
    height: 240px;
}

.bransbody
{
    width:350px;
    height:150px;
    float:left;
}

#firstbrans
{
    width:500px;
    height:25px;
    margin-top:8px;
    margin-bottom:8px;
    line-height: 25px;
    padding-left: 10px;
    font-size:21px;
    font-family:Montserrat;
}

.branstext
{
    width:850px;
    height:auto;
    float:left;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.6rem;
        text-align: justify;
    padding: 0.75rem 1.5rem;
        font-family: "Exo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        margin-top:-45px;
        margin-left:1px;
}

Yükseklik azaltıldığı zaman düzen düzgün hale geliyor ama bu sefer de Div'in içindeki görünüm ve hizalar bozuluyor.
 
Son düzenleme:

Yeni konular

Geri
Yukarı