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 для левой стороны. Это должно быть непосредственно рядом с правой стороной, но оно находится, потому что divs справа занимают все пространство.

#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

РНР не имеет никакого отношения к вашему вопросу. Отправьте отображаемый HTML. – j08691

Теги разделов с id rewardDet - это HTML, который отображает правую часть страницы. Левая сторона HTML/PHP является \t \t \t \t \t \t \t \t

projectdetails2; ?>

@ j08691 – Afe

Если мне нужно предоставить больше информации, пожалуйста, дайте мне знать, потому что я считаю, что я. @ J08691. – Afe

Удаление поплавка: право; и изменить ширину до 100% для вашего раздела, создать новый div с шириной: 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

Удалить очиститель div в while(), перемещая все после этого div под ним, а не рядом с ним. – MrKew

projectDet имеет отдельный Div, поэтому это не поможет. @MrKwe – Afe

Div с правой стороны имеет динамическую высоту, а div слева фиксирован: бок о бок необходим

ответ

Смежные вопросы