Question

下面是页面右侧的PHP代码。这也是页面的动态部分。请注意，section标签是与内容一起动态创建的。

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

#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。这应该直接在右侧，但是因为右边的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.

Answer 1

删除float：right;并为您的部分将宽度更改为100％，创建宽度为25％的新div;和浮动：对;之后没有更清洁的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>

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

1 个答案: