我试图将查询的输出(以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%;
}
有什么办法吗?
答案 0 :(得分:0)
您的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>
答案 1 :(得分:0)
确保您的帖子放在 .flatMap { _ -> Observable<Whatever> in
...
}
周围。当前,您正在每个循环迭代中创建一个新的<div class="post">
。
此外,请不要使用css属性<div class="grid-container">
,而应使用grid-column
,如@Wendelin上面代码段中所示。
如果这不起作用,请在此处粘贴转储的渲染HTML和CSS。