为什么div会向左边缘运行？

Question

I am new to css and php, i want to retrieve information from db via php and display it to the user, all working fine but problem is with the UI part enter image description here and my code is

<?
$result=mysql_query($query) or die (mysql_error());
echo "<div class='container'>";
while($row =mysql_fetch_array($result)) 
{
    echo "<div class='row custom1'>";
    echo "<div class='col-sm-12' id='dd' style='border-style:solid; border-width:1px; margin-left:10px; margin-top:20px'><a href='showit.php' class='kk'>";
    echo '<p class="head1">QUESTION:',$row['title'],'</p><p clsss="head2" style="font-size:20px;"></br>Tags:',$row['tags'],'</br>Posted by:',$row['posted'],'</br>Posted On:',$row['postedon'],'</p>';
    echo "</div>";
}
echo "</div>";
?>

is there any way to align the divs properly?

Answer 1

it's because you're missing the closing </div> for the second div and the closing </a> in your while loop making a bunch of children of each other, rather than inner nodes of the container parent, use this loop instead:

$result=mysql_query($query) or die (mysql_error());
echo "<div class='container'>";
while($row =mysql_fetch_array($result)) 
{
    echo "<div class='row custom1'>";
      echo "<div class='col-sm-12' id='dd' style='border-style:solid; border-width:1px; margin-left:10px; margin-top:20px'>";
        echo "<a href='showit.php' class='kk'>";
          echo "<p class=\"head1\">QUESTION:".$row['title']."</p>";
          echo "<p class=\"head2\" style=\"font-size:20px;\">";
            echo "</br>Tags:".$row['tags']."</br>Posted by:".$row['posted']."</br>Posted On:".$row['postedon'];
          echo "</p>";
        echo "</a>";
      echo "</div>"; //col-sm-12
    echo "</div>"; //row custom1
}
echo "</div>";

Answer 2

By careful you are not closing all tags. I saw that

<div class='col-sm-12' id='dd' style='border-style:solid; border-width:1px; margin-left:10px; margin-top:20px'><a href='showit.php' class='kk'>

is not closed.

Please go into your browser page and inspect the elements an verify how they are closed.