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

时间:2019-05-02 12:55:45

标签: php css

我试图将查询的输出(以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%;
}

有什么办法吗?

2 个答案:

答案 0 :(得分:0)

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

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

也可以使用25%来代替1frRead 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>

答案 1 :(得分:0)

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

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

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