Question

我正在尝试创建一个迷你留言板。我正在为每个消息使用div，但是我想在网格中组织div。网格应该具有灵活性和响应性，这意味着列和行的数量应随着屏幕尺寸的变化而动态变化。

这是我到目前为止所做的，但似乎不起作用：

<div class="grid-container">

<?php
        while($row = $result->fetch_assoc() ){
            display($row['name'],$row['date'],$row['message']);
        }
}

function display($name, $date, $message){

    echo '<div class="flip-card grid-item">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <p class="message">'.$message.'</p>
    </div>
    <div class="flip-card-back">
      <h1 class="nameTitle"> '.$name.'</h1> 
      <p class="dateTitle">'.$date.'</p>
    </div>
  </div>
</div>';

}

?>

</div>

我知道用于显示数据库信息的代码有效，因为div确实出现了。只是它们没有出现在网格中。

提前感谢您的帮助！

Answer 1

我建议您使用FlexBox。

    .body{
        height: 100vh;
    }

    .column-wrapper {
        height: inherit;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .column {
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 150px;
        margin-top: 10px;
        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }

</style>

此处是一个简单的示例：https://jsfiddle.net/04yxfwLg/1/

诀窍是使用justify-content到space-around

可以在此amazing article.

上找到有关flexbox的更多信息

如何在PHP中动态创建网格？

1 个答案: