PHP foreach不同的样式或3列（或CSS？）

Question

I have a loop going that is styled how I want, but it extends vertically when I would want it to extend into 3 horizontal columns. The attached image shows what I want (three boxes each row). My current website displays 1 column and several rows. I'm not that familiar with exactly what is happening in css (someone helped me) that may be causing this inherently; or if I need to do foreach in php. Here's my relevant code and css. Thanks!

3 Boxes/Columns each row

   $result = mysqli_query($link, $sql);

   $resultCheck = mysqli_num_rows($result);
    if ($resultCheck > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            echo "<section class='content'>";
            echo "<div class='section group'>";
            echo "<div class='col span_1_of_3'>";
            echo "<div class='card'>";
            echo "<h2 class='name'>";
            echo $row['Fname'] . " ";
            echo $row['Lname'];
            echo "</h2>";
            echo "<section class='profile'>";
            echo "<h3>Interests:</h3> ";
            echo $row['Interest1'] . ", ";
            echo $row['Interest2'] . ", ";
            echo $row['Interest3']  . "<br>";
            echo "<h3>Website:</h3> ";
            echo $row['Website']  . "<br>";
            echo "<h3>Personal Statement:</h3> ";
            echo "<aside class='statement'>";
            echo "<p>";
            echo $row['PersonalStatement'] . "<br><br>";
            echo "</p>";
            echo "</aside>";
            echo "<div id=PhoneEmail>";
            echo $row['Phone'] . "<br>";
            echo $row['Email'];
            echo "</div>";
            echo "</section>";
            echo "</div>";
            echo "</div>";
            echo "</div>";
            echo "</body>";
            echo "</html>";
        }
    } else {

CSS

/* GRID STYLES */

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 4%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 65.33%; }
.span_1_of_3 { width: 30.66%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {  margin: 1% 0 1% 0%; }
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

Answer 1

You should put the container values outside the while() function, i.e the body, div, section and inside the while() function put only the columns.

For example:

if(rowsAvailable==true) {
     echo "<div class='section row'>";
     while(yourCondition){
       echo "<div class='col span_1_of_3'>Content</div>";
     }
     echo "</div>";
 }

Hope it helps!

PS: Also, why are you including the body and html closing tags inside the while loop?