Php 右侧的Div具有动态高度，而左侧的Div是固定的：需要并排_Php_Css_Html

Php 右侧的Div具有动态高度，而左侧的Div是固定的：需要并排

php css html

Php 右侧的Div具有动态高度，而左侧的Div是固定的：需要并排,php,css,html,Php,Css,Html,下面是页面右侧的PHP代码。这也是页面的动态部分。注意：节标记是随内容动态创建的 while($row = mysqli_fetch_object($result)){ ?> <section id = "rewardDet"> <br> <p> <h2><?php echo "N".$row->pledgeAmount. " " . "or more"; ?></h2></p> <br>

下面是页面右侧的PHP代码。这也是页面的动态部分。注意：节标记是随内容动态创建的

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>

下面是左侧的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>


关于这个项目
支持该项目的奖励
fileToUpload；？>“width=“100%”height=“100%”>









预计交货时间：




可用奖励数量：

删除float:right；并将您的分区的宽度更改为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>


.报酬{
最小高度：400px；/*400*/
宽度：100%；/*360*/
最高利润率：0.8%；/*10*/
利润率下限：0.8%；/*10*/
右边距：14.08%；/*200*/
背景色：红色；
}
#项目{
最小高度：400px；/*400*/
宽度：41.67%；/*600*/
最高利润率：0.8%；/*10*/
利润底部：0.8%；/*10.8*/
左边距：14.08%；/*200*/
浮动：左；
背景颜色：蓝色；
}
#a{
浮动：对；
背景颜色：绿色；
宽度：25%；
}

PHP与您的问题无关。请发布呈现的HTML。带有id rewardDet的部分标记是呈现页面右侧的HTML。左侧HTML/PHP是@j08691如果我需要提供更多信息，请告诉我，因为我相信我已经提供了。@j08691。您没有提供我要求的信息r在我的第一条评论中。问题被重新编辑。我希望您现在已经拥有了所需的一切@j08691Delete cleaner div in while（），它将所有内容移动到该div之后的下方，而不是旁边。projectDet有一个单独的div，所以这样做也不会有任何帮助。@MrKweIt是，至少在我的示例中是这样的（我编辑了问题）。因为为projectDet和all rewardDet设置两个div的格式要比为这么多div设置两个div的格式容易得多。谢谢@MrKew我看到了我的错误。是的，如果它们在代码中左右浮动，它会起作用。我犯了一个错误，将rewardDet div浮动到projPic旁边的右侧。这导致了一个问题。谢谢曾经，你帮助我认识到我的问题和解决办法。

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