Question

我试图将查询的输出（以php格式）放置在基于列的网格中。我试图通过四列来获得类似pinterest的效果，其中每个帖子的高度都不同，但是宽度都相同。

如果我尝试使用display: grid;，我将获得一列包含所有帖子的信息，因为foreach会将其全部转储到那里。

如果我尝试使用display: inline-grid;，它将变成基于行的网格，并且结果不是很漂亮。

php代码

class Post{
 public static function getAll()
    {
        $conn = Db::getInstance();
        $result = $conn->query('SELECT posts.*,users.firstname,users.lastname, users.picture FROM posts,users WHERE posts.user_id=users.id ');
        return $result->fetchAll(PDO::FETCH_CLASS, __CLASS__);
    }
}

html代码

<?php foreach ($posts as $post): ?>
    <div class="grid-container">
      <div class="post">
    <article >
          <img src="<?php echo $post->picture; ?>" class="profilepic">
          <p class="name"> <?php echo $post->firstname.' '.$post->lastname; ?> </p>
          <p> <?php echo $post->date_created; ?> </p>
          <img src="<?php echo $post->image; ?>" alt="">
          <p> <?php echo $post->description; ?> </p>
          <a href="detail.php?id=<?php echo $post->id; ?>">More</a>
        </article>
      </div>
    </div>  
<?php endforeach; ?>

css代码

div.grid-container {
    display: grid;
    grid-column: 25% 25% 25% 25%;
}

有什么办法吗？

Answer 1

您的CSS错误grid-column指定项目应位于哪一列。您想要的是grid-template-columns

div.grid-container {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

也可以使用25%来代替1fr。 Read more。

基本上fr代表分数。您定义了1fr四次，所以总共有4个分数。然后将指定的分数除以总分数，然后将其转换为百分比。

示例：

grid-template-columns: 1fr 1fr 1fr 1fr = grid-template-columns: 1/4 1/4 1/4 1/4 = grid-template-columns: 25% 25% 25% 25%

grid-template-columns: 2fr 1fr 2fr 3fr = grid-template-columns: 2/8 1/8 2/8 3/8 = grid-template-columns: 25% 12.5% 25% 37.5%

div.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.post {
  height: 100px;
  background-color: #eee;
  margin: 5px;
  padding: 5px;
  text-align: center;
}

<div class="grid-container">
  <div class="post">
    <article>
      Some content
    </article>
  </div>
  <div class="post">
    <article>
      Some content
    </article>
  </div>
  <div class="post">
    <article>
      Some content
    </article>
  </div>
  <div class="post">
    <article>
      Some content
    </article>
  </div>
  <div class="post">
    <article>
      Some content
    </article>
  </div>
  <div class="post">
    <article>
      Some content
    </article>
  </div>
  <div class="post">
    <article>
      Some content
    </article>
  </div>
  <div class="post">
    <article>
      Some content
    </article>
  </div>
</div>

Answer 2

确保您的帖子放在.flatMap { _ -> Observable<Whatever> in ... }周围。当前，您正在每个循环迭代中创建一个新的<div class="post">。

此外，请不要使用css属性<div class="grid-container">，而应使用grid-column，如@Wendelin上面代码段中所示。

如果这不起作用，请在此处粘贴转储的渲染HTML和CSS。

如何在基于列的网格中放置<！-？php foreach？->

2 个答案: