时间戳

首页 > 解决方案 > PHP foreach 不同的样式或 3 列（或 CSS？）

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

问题描述

我有一个按我想要的样式设置的循环，但是当我希望它扩展到 3 个水平列时它会垂直延伸。附图显示了我想要的（每行三个框）。我当前的网站显示 1 列和几行。我不太熟悉 css 中发生的事情（有人帮助了我），这可能是固有的原因；或者如果我需要在 php.ini 中做 foreach。这是我的相关代码和css。谢谢！

每行 3 个框/列

   $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%; }
}

标签： phphtmlcss

解决方案

您应该将容器值放在while() 函数之外，即body、div、section，而在while() 函数内只放置列。

例如：

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

希望能帮助到你！

PS：另外，为什么在 while 循环中包含 body 和 html 结束标签？

推荐阅读