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

9gm1akwq 于 2023-02-20 发布在 PHP

关注(0)|答案(1)|浏览(146)

这里有一个小问题。可能需要一些洞察力。我正在向我的网站的访问者显示用户创建的事件。我正在使用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属性，该容器包含保存每个事件的每个单独的框。我将flex方向设置为row，因为我希望它水平显示，然后在每行空间用完后转到下一行。
我尝试了一些方法。我试着切换到css的列计数属性，但是没有得到我所期望的结果。老实说，我可能没有对这个属性做足够的调整。但是我把心思放在了flex box属性上。我也试着把flex方向设置为column，还试着给那些在while循环中每个事件都要重复的box添加一个inline-block显示属性。我在网上找到了一些类似的问题，但不完全是。一个使用javascript，但显然这也可以用php来完成。我还找到了一些文章谈论使用flexbox来居中内容，这不是这里的目标。

css

来源：https://stackoverflow.com/questions/75497656/display-php-while-loop-horizontally-vertically-using-flexbox

1条答案

按热度按时间

31moq8wy1#

尝试将.filter-wrap div元素移动到while() {}循环之外。
您当前的编码：

while() {
  echo '<div class="filter-wrap">';
    echo '<div id="filter-boxes">';
      // content goes here...
    echo '</div>';
  echo '</div>';
}

将导致以下结构，其中每个.filter-wrap仅包含单个子.filter-boxes，这将始终导致垂直显示：

<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
</div>

对于横向表示，正确的结构应该是一个.filter-wrap由多个.filter-boxes查尔兹组成：

<div class="filter-wrap">
  <div id="filter-boxes"> content </div>
  <div id="filter-boxes"> content </div>
  <div id="filter-boxes"> content </div>
</div>

因此，您可以尝试将编码更改为：

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

while() {
  echo '<div id="filter-boxes">';
    // content goes here...
  echo '</div>';
}

echo '</div>';

代码段演示给你的编码逻辑结果。它是在JS中，但你只需要应用相同的PHP
希望它有帮助，快乐编码！

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>

赞(0）回复(0）举报 2023-02-20

我来回答

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

1条答案

相关问题

热门标签

最新问答