我的divs是颠倒的

Question

所以我循环遍历一些值，并将它们以图形形式放在div中。但是出于某种原因，它们从div的顶部到底部。任何帮助将不胜感激！

<div id="div1" style="height:50px;width:70px;background:yellow; "
</div>

    <?php
    $n=0;
      for ( ;$n< $total_pages; ++$n) {

    $previous_views= mysql_query("SELECT `$n` FROM `books`.`$thisone` WHERE       `$thisone`.`$thisone` =0");
    $resultedin = mysql_fetch_row($previous_views);
    $fullresult=implode("','",$resultedin);

    ?>


 <script>

    var highview = '<?php echo $highest_views ; ?>'; 
    var mything='<?php echo $fullresult ; ?>';
    var pagestotal='<?php echo $total_pages ; ?>';
    var thewidth=70/pagestotal; 
    var m = mything/highview;
    var h = m*50;
    for ( i=0; i<1; i++){
      var div = document.createElement("div");
      div.style.width = thewidth+"px";
      div.style.height = h+"px";
      div.style.background = "green";
      div.style.float = "left";

      var element=document.getElementById("div1");
      element.appendChild(div);
    }
    </script>
        <?php


        }
    ?>

编辑：我拿出“浮动”并添加 div.style.display = "inline-block"; ，以防万一其他人遇到类似的麻烦。感谢大家的反馈，我会考虑更新我的SQL。