这就是我的代码的样子。我循环通过每一个职位,使它显示在我的网站上。
<div class="blog-container">
<div class="posts">
{% for post in site.posts %}
<div class="post-preview">
<h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">{{ post.title }}</a></h2>
<p class="post-date">{{ post.date | date: "%B %d, %Y" }}</p>
<div class="post-summary">
{{ post.summary | strip_html }}
</div>
</div>
{% endfor %}
</div>
</div>
This is what the output currently looks like:
This is what I'd like the posts to look like:
我不知道如何使间距如何我想要的,而保持不变,当我调整页面。我是一个完全的初学者试图使用杰基尔。所有的帮助是非常感谢!
3条答案
按热度按时间u0sqgete1#
我不知道你的CSS类是如何设置的,但你可以通过添加以下内容轻松实现:
padding-top: 16px
和padding-bottom: 16px
(根据需要调整px
值)到post-preview
类。gr8qqesn2#
您可以使用**
padding
和margin
**来实现您的结果。我下面的代码使用纯HTML和CSS,但在Jekyll
也可以附加样式标签到您的页面,并实现相同的结果。你可以使用下面的代码作为参考。
希望这有帮助
ymdaylpp3#
试试这个: