右側の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>

これは、動的右側の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.

出典

2017-02-22 Afe

PHPは、あなたの質問には無関係です。レンダリングされたHTMLを投稿してください。 – j08691

id rewardDetのセクションタグは、ページの右側をレンダリングするHTMLです。左サイドのHTML/PHPは、私はより多くの情報を提供する必要がある場合、私は私が持っていると信じているので、私に教えてください。@ j08691 j08691 – Afe

@ \t \t \t \t \t \t \t \t

projectdetails2; ?>

です。 – Afe

削除フロート：右;セクションの幅を100％に変更するには、幅：25％の新しい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の直後にあるdivをすべて移動します。 – MrKew

projectDetには個別のDivがありますので、それも役に立たないでしょう。 @MrKwe – Afe

右側のdivには動的な高さがあり、左側のdivは固定されています：横に並べてください

答えて

関連する問題