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?
Normal görünüm hali.
Sorunlu div yükseklik azaltıldığı zaman bozulan içerik.
Eki Görüntüle 1051499
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.
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.
Sorunlu div yükseklik azaltıldığı zaman bozulan içerik.
Eki Görüntüle 1051499
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: