Div右側有動態高度，左側div是固定的：並排需要

以下是頁面右側的PHP代碼。這也是頁面的動態部分。請注意，節標記是隨着內容動態創建的。Div右側有動態高度，左側div是固定的：並排需要

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>

這是動態右側

#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; 
}

的CSS下面是左側的CSS。這應該是直接在右側，但它是由於右側的div佔據了所有空間。

#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; 
}

請幫我讓他們保持並排。這讓我很頭疼。

這是整個頁面的代碼

<!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.

來源

2017-02-22 Afe

的PHP無關你的問題。請發佈呈現的HTML。 – j08691

ID爲rewardDet的部分標記是呈現頁面右側的HTML。左側HTML/PHP是\t \t \t \t \t \t \t \t

projectdetails2; ?>

@ j08691 – Afe

如果我需要提供更多的信息，請讓我知道，因爲我相信我有。@ j08691。 – Afe

刪除浮動：權利;並將寬度更改爲100％，創建寬度爲25％的新div;和float：right;那之後再沒有更乾淨的div了。

這裏是我的榜樣

<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>

來源

2017-02-22 20:10:24 MrKew

這是行不通的。 – Afe

在while（）中刪除清理div，它在它下面的div之後移動所有內容，而不是在它旁邊。 – MrKew

projectDet有一個單獨的分區，所以這也無濟於事。 @MrKwe – Afe

Div右側有動態高度，左側div是固定的：並排需要

回答

相關問題