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是固定的：并排需要

回答

相关问题