获取内联 div 标签中的元素

Question

以下php脚本用于从数据库中检索数据并显示在网页中！我使用了 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

为您的结果使用 <table> 标签而不是 div。每个循环将为 <tr>，值将为 <td>.

Answer 2

您可以通过使用具有指定 CSS 样式的合适容器元素来实现您想要的布局，如下例所示。然而，由于图像的显式大小是分配给父 div 的宽度的两倍，布局中断了——也许使用 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>";
    }
?>

获取内联 div 标签中的元素

Getting elements in div tag inline

html

php

inline

division