Kasun Sampath Kasun Sampath - 2 months ago 9
HTML Question

Getting elements in div tag inline

The following php script is used to retrieve data from the database and display in a web page! i have used div tags but don't know how to display them inline how can i do that?

<?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>";
}
?>


Also i want to display the set of lines after the while loop in a separate line! how can i do them?

Answer

You can achive the layout you want by using suitable container elements with designated CSS styles as the example below. The layout breaks however because of the explicit size of the images being twice the width assigned to the parent divs - perhaps it would be easier to control the size of the images with CSS also.

<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>";
    }
?>