使用 Flexbox 水平和垂直循环显示 PHP-解网

问：

这里有一点问题。可以使用一些见解。我正在向我网站的访问者显示用户创建的事件。我正在使用 while 循环来显示尚未通过的所有内容。我的目标是显示两个彼此相邻的独立事件，然后在该事件下方显示另外两个事件，依此类推。目前我正在使用 flex box css 属性来实现这一点，但它只是垂直显示输出，而不是我想要的方式，这意味着它每行只放置一个事件。这是我当前用于显示事件的输出。

include 'db_connect.php';
        $event_type = $_POST['event_type'];
        $state = $_POST['state'];
        $current_date = date("Y-m-d");
        $sql = "SELECT * FROM events WHERE event_type LIKE '%".$event_type."%' AND state LIKE '%".$state."%' AND end_date > '$current_date' ORDER By end_date ASC";
        $result = mysqli_query($conn, $sql);
        if (isset($_POST['search-events']) && !empty($event_type) && !empty($state)) {
            while($row = mysqli_fetch_array($result)) {
                $event_name= $row['event_name'];
                $image = $row['image'];
                $start_date = $row['start_date'];
                $end_date = $row['end_date'];
                $start_time = $row['start_time'];
                $end_time = $row['end_time'];
                $street = $row['street'];
                $city = $row['city'];
                $state = $row['state'];
                $zip_code = $row['zip_code'];
                $id = $row['event_id'];
                echo '<div class="filter-wrap">';
                    echo '<div id="filter-boxes">';
                        echo '<div id="list_image"><img src="'.$image.'"></div>';
                        echo '<div id="list_name">'.$event_name.'</div>';
                        echo '<div id="list_date">'.$start_date. ' - ' .$end_date. '</div>';
                        echo '<div id="list_time">' .$start_time. ' - ' .$end_time. '</div>';
                        echo '<div id="list_location">'.$street.''.$city.''.$state.''.$zip_code.'</div>';
                    echo '</div>';
                echo '</div>';
        }
    }

然后是我正在使用的 css。

.filter-wrap {
    display: flex;
    flex-direction: row;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

#filter-boxes {
    border: 2px solid #999;
    text-align: center;
    width: 50%;
    height: 150px;
    }

正如你所看到的，我在容器中使用了 flex 属性，该属性保存了保存每个事件的每个单独的框。我将弯曲方向设置为行，因为我希望它水平显示，然后在每行空间用完后转到下一行。

我尝试了几件事。我尝试切换到 css column count 属性，但没有得到我期望的结果。老实说，我可能没有对该属性进行足够的调整，但我对 flex box 属性一心一意。我还尝试将 flex 方向设置为列，并尝试将内联块显示属性添加到每个事件的 while 循环中重复的框中。我在网上找到这个与我的问题有点相似，但不完全是。一个使用 javascript，但这显然也可以用 php 以某种方式完成。我还发现有几篇文章讨论使用 flexbox 使内容居中，这不是这里的目标。

php css while-loop flexbox 显示

var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');

var content_1 = '';
var content_2 = '';

content_2 = '<div class="filter-wrap">';

for (var i = 1; i <= 5; i++)
{
  // result 1
  content_1 += '<div class="filter-wrap"> <div class="filter-boxes">content ' + i + '</div> </div>';
  
  // result 2
  content_2 += '<div class="filter-boxes">content ' + i + '</div>';
}

content_2 += '</div>';

result_1.insertAdjacentHTML('beforeend', content_1);
result_2.insertAdjacentHTML('beforeend', content_2);

.filter-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

.filter-boxes {
  border: 2px solid #999;
  text-align: center;
  width: 50%;
  height: 50px;
  
  /* for two columns display */
  max-width: 49%;
}

#result_1,
#result_2 {
  background-color: lightgray;
  border: 1px dashed black;
  margin: 3px;
}

result 1
<div id="result_1"></div>

result 2
<div id="result_2"></div>

使用 Flexbox 水平和垂直循环显示 PHP

Display PHP While Loop Horizontally & Vertically Using Flexbox

评论

评论