divタグの要素をインラインで取得する

Question

次のPHPスクリプトを使用して、データベースからデータを取得し、Webページに表示します。私はdivタグを使用していますが、インラインで表示する方法を知らないので、どうすればいいですか？

<?php 
       require("includes/db.php"); 

       $sql="SELECT * FROM `order` "; 
       $result=mysqli_query($db,$sql); 


    echo"<div style='width:50px'>"; 
    echo "Order No."; 
    echo"</div>"; 
    echo"<div style='width:50px'>"; 
    echo "NIC no"; 
    echo"</div>"; 
    echo"<div style='width:50px'>"; 
    echo "Delivery/Pickup"; 
    echo"</div>"; 
    echo"<div style='width:50px'>"; 
    echo "Address"; 
    echo"</div>"; 
    echo"<div style='width:50px'>"; 
    echo "Expect time"; 
    echo"</div>"; 
    echo"<div style='width:50px'>"; 
    echo "Telephone"; 
    echo"</div>"; 
    echo"<div style='width:50px'>"; 
    echo "Email"; 
    echo"</div>"; 
    echo"<div style='width:100px'>"; 
    echo "Prescription-1"; 
    echo"</div>"; 
    echo"<div style='width:100px'>"; 
    echo "Prescription-2"; 
    echo"</div>"; 
    echo"<div style='width:100px'>"; 
    echo "Prescriptions-3"; 
    echo"</div>"; 



    while($row=mysqli_fetch_array($result)) 
    { 

     echo"<div style='width:50px'>"; 
     echo $row["OrderNo."]; 
     echo"</div>"; 
      echo"<div style='width:50px'>"; 
     echo $row["NIC"]; 
     echo"</div>"; 
      echo"<div style='width:50px'>"; 
     echo $row["DP"]; 
     echo"</div>"; 
      echo"<div style='width:50px'>"; 
     echo $row["Address"]; 
     echo"</div>"; 
      echo"<div style='width:50px'>"; 
     echo $row["DPTime"]; 
     echo"</div>"; 
      echo"<div style='width:50px'>"; 
     echo $row["Telephone"]; 
     echo"</div>"; 
      echo"<div style='width:50px'>"; 
     echo $row["Email"]; 
     echo"</div>"; 
     echo"<div style='width:100px'>"; 
     echo '<a href='.($row['Image1']).' >'; 
     echo "<img src='" .$row['Image1']. "' height='200' width='200'/>"; 
     echo "</a>"; 
     echo"</div>"; 


     echo"<div style='width:100px'>"; 
     echo '<a href='.($row['Image1']).' >'; 
     echo "<img src='" .$row['Image1']. "' height='200' width='200'/>"; 
     echo "</a>"; 
     echo"</div>"; 

     echo"<div style='width:100px'>"; 
     echo '<a href='.($row['Image1']).' >'; 
     echo "<img src='" .$row['Image1']. "' height='200' width='200'/>"; 
     echo "</a>"; 
     echo"</div>"; 
    } 
     ?> 

また、私は別の行にwhileループの後に一連の行を表示したい！どうすればそれらをすることができますか？

Answer 1

以下の例のように、指定したCSSスタイルの適切なコンテナエレメントを使用して、必要なレイアウトを作成できます。しかし、イメージの明示的なサイズが親divに割り当てられた幅の2倍であるため、レイアウトが破損します。CSSを使用してイメージのサイズを制御する方が簡単かもしれません。

<style type='text/css'> 
    #headers, 
    .row{ 
     width:auto; 
     float:left; 
     clear:both; 
     display:block; 
     margin:0; 
     padding:0; 
     box-sizing:border-box; 
     font-size:0.7rem; 
    } 
    #headers > div{ 
     background:black; 
     color:white; 
    } 
    #headers > div, 
    .row > div { 
     display:inline-block; 
     border:1px dotted black; 
     clear:none; 
     float:left; 
     margin:0; 
     box-sizing:border-box; 
     width:50px; 
     height:1.5rem; 
    } 
    .w100{width:100px;} 
</style> 


<?php 
    require("includes/db.php"); 

    $sql="SELECT * FROM `order` "; 
    $result=mysqli_query($db,$sql); 


    echo" 
    <div id='headers'> 
     <div>Order No.</div> 
     <div>NIC no</div> 
     <div>Delivery/Pickup</div> 
     <div>Address</div> 
     <div>Expect time</div> 
     <div>Telephone</div> 
     <div>Email</div> 
     <div class='w100'>Prescription-1</div> 
     <div class='w100'>Prescription-2</div> 
     <div class='w100'>Prescriptions-3</div> 
    </div>"; 



    while($row=mysqli_fetch_array($result)){ 

     echo" 
     <div class='row'> 
      <div>{$row['OrderNo.']}</div> 
      <div>{$row['NIC']}</div> 
      <div>{$row['DP']}</div> 
      <div>{$row['Address']}</div> 
      <div>{$row['DPTime']}</div>' 
      <div>{$row['Telephone']}</div> 
      <div>{$row['Email']}</div> 
      <div class='w100'> 
       <a href='{$row['Image1']}' > 
        <img src='{$row['Image1']}' height='200' width='200'/> 
       </a> 
      </div> 
      <div class='w100'> 
       <a href='{$row['Image1']}' > 
        <img src='{$row['Image1']}' height='200' width='200'/> 
       </a> 
      </div> 
      <div class='w100'> 
       <a href='{$row['Image1']}'> 
        <img src='{$row['Image1']}' height='200' width='200'/> 
       </a> 
      </div> 
     </div>"; 
    } 
?> 

Answer 2

divの代わりに<table>のタグを使用してください。各ループは<tr>になり、値は<td>になります。