获取div标签中的元素内联

时间:2016-09-28 07:24:31

标签: php html inline division

以下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循环之后的行集!我该怎么办?

2 个答案:

答案 0 :(得分:0)

您可以使用具有指定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>";
    }
?>

答案 1 :(得分:-1)

使用<table>标记代替div而不是div。每个循环将为<tr>,值为<td>