Div auf der rechten Seite hat eine dynamische Höhe, während div auf der linken Seite ist behoben: Seite neben benötigt

Unten ist der PHP-Code für die rechte Seite der Seite. Dies ist auch der dynamische Teil der Seite. Beachten Sie, dass das Abschnittstag zusammen mit dem Inhalt dynamisch erstellt wird.Div auf der rechten Seite hat eine dynamische Höhe, während div auf der linken Seite ist behoben: Seite neben benötigt

while($row = mysqli_fetch_object($result)){ 
?> 
<section id = "rewardDet"> 
<br> 
<p> <h2><?php echo "N".$row->pledgeAmount. " " . "or more"; ?></h2></p> <br> 
<p><span> <br><?php echo $row ->title; ?></span></p> <br> 

<p> <span><?php echo $row ->description; ?></span></p> <br> 
<p> <span>Estimated Delivery Time: <br> <?php echo $row ->deliverytime . " ". $row ->deliveryyear; ?></span></p> <br> 
<p> <span><?php echo $row ->shippingdetails; ?></p></span> <br> 
<p> <span>Number of Rewards Available: <br><?php echo $row ->reward1No; ?></span></p> 

</section>

Dies ist die CSS für die dynamische rechte Seite

#rewardDet{ 
min-height:400px; /* 400 */ 
width:25%; /* 360 */ 
margin-top:0.8%; /* 10 */ 
margin-bottom:0.8%; /* 10 */ 
margin-right: 14.08%; /* 200 */ 
float: right; 
}

Unterhalb die CSS für die linke Seite ist. Dies sollte direkt neben der rechten Seite sein, aber es ist unter, weil die divs auf der rechten Seite den ganzen Raum einnehmen.

#projDet{ 
min-height: 400px; /* 400 */ 
width: 41.67%; /* 600 */ 
margin-top: 0.8%; /* 10 */ 
margin-bottom:0.8%; /* 10 8*/ 
margin-left:14.08%; /* 200 */ 
float: left; 
}

Bitte helfen Sie mir, sie nebeneinander bleiben machen. Es gibt mir Kopfschmerzen.

Dies ist der Code für die gesamte Seite

<!DOCTYPE html> 
    <html> 
    <head> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" type="text/css" rel="stylesheet" > 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
    </head> 
    <body> 

<!-- about and reward title --> 
<div id = "aboutProjH"> 
<h2> About This Project </h2> 
</div> 
<div id = "rewardH"> 
<h2> Rewards For Supporting This Project</h2> 
</div> 
<div id = "clearer"> </div> 
<!--project pic and dynamic rewards--> 
<div id = "projPic"> 
<img src="<?php echo $rowe ->fileToUpload;?>" width = "100%" height = "100%"> 
</div> 

<section id = "rewardDet"> 
<br> 
<p> <h2><?php echo "N".$row->pledgeAmount. " " . "or more"; ?></h2></p> <br> 
<p><span> <br><?php echo $row ->title; ?></span></p> <br> 

<p> <span><?php echo $row ->description; ?></span></p> <br> 
<p> <span>Estimated Delivery Time: <br> <?php echo $row ->deliverytime . " ". $row ->deliveryyear; ?></span></p> <br> 
<p> <span><?php echo $row ->shippingdetails; ?></p></span> <br> 
<p> <span>Number of Rewards Available: <br><?php echo $row ->reward1No; ?></span></p> 

</section> 
<div id = "clearer"> </div> 

<?php 
} 
} 
} 
?> 
<div id = "clearer"> </div> 
<!-- project details and empty divs --> 

<div id = "projDet"> 
<span><?php echo $rowe ->projectdetails2; ?> </span> 
</div> 
<!--<div id = "bsideProjDet"> 
</div> --> 
<div id = "clearer"> </div> 
</body> 
</html>

Please click to see the image to make things clearer.The div on the left is at the bottom of the page (projDet)and the div on the right is dynamic and takes all the space. i need them side by side.

Quelle

2017-02-22 Afe

Die PHP ist irrelevant für Ihre Frage. Bitte poste das gerenderte HTML. – j08691

Die Abschnitts-Tags mit der ID rewardDet sind der HTML-Code, der die rechte Seite der Seite darstellt. Die linke Seite HTML/PHP ist \t \t \t \t \t \t \t \t

projectdetails2; ?>

@ j08691 – Afe

Wenn ich mehr Informationen zur Verfügung stellen müssen, lassen Sie es mich wissen, weil ich glaube, ich habe. @ J08691. – Afe

löschen float: right; und ändere die Breite für deine Sektion auf 100%, erstelle ein neues div mit der Breite: 25%; und schweben: richtig; Lege danach kein saubereres Div auf.

Hier ist mein Beispiel

<html> 
    <head> 
    <style> 
     .rewardDet{ 
      min-height:400px; /* 400 */ 
      width:100%; /* 360 */ 
      margin-top:0.8%; /* 10 */ 
      margin-bottom:0.8%; /* 10 */ 
      margin-right: 14.08%; /* 200 */ 
      background-color: red; 
     } 

     #projDet{ 
      min-height: 400px; /* 400 */ 
      width: 41.67%; /* 600 */ 
      margin-top: 0.8%; /* 10 */ 
      margin-bottom:0.8%; /* 10 8*/ 
      margin-left:14.08%; /* 200 */ 
      float: left; 
      background-color: blue; 
     } 

     #a{ 
      float: right; 
      background-color: green; 
      width: 25%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="a"> 
     <div class="rewardDet"></div> 
     <div class="rewardDet"></div> 
    </div> 
    <div id="projDet"></div> 
    </body> 
</html>

Quelle

2017-02-22 20:10:24 MrKew

Das wird nicht funktionieren. – Afe

Lösche sauberer div in while(), es bewegt alles nach dem div darunter, nicht daneben. – MrKew

projectDet hat eine separate Div so tun, die auch nicht helfen wird. @MrKwe – Afe

Div auf der rechten Seite hat eine dynamische Höhe, während div auf der linken Seite ist behoben: Seite neben benötigt

Antwort

Verwandte Themen