css 我如何修复我的博客文章的行距?

kpbwa7wx  于 2023-10-21  发布在  其他
关注(0)|答案(3)|浏览(104)

这就是我的代码的样子。我循环通过每一个职位,使它显示在我的网站上。

<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:
我不知道如何使间距如何我想要的,而保持不变,当我调整页面。我是一个完全的初学者试图使用杰基尔。所有的帮助是非常感谢!

u0sqgete

u0sqgete1#

我不知道你的CSS类是如何设置的,但你可以通过添加以下内容轻松实现:padding-top: 16pxpadding-bottom: 16px(根据需要调整px值)到post-preview类。

gr8qqesn

gr8qqesn2#

您可以使用**paddingmargin**来实现您的结果。我下面的代码使用纯HTML和CSS,但在Jekyll也可以附加样式标签到您的页面,并实现相同的结果。

<style>
    *{
    margin: 0;
    padding: 0;
    }

      .blog-container {
        display: grid;
      }
      
      .post-preview {
        padding: 20px;
        text-align: left;
      }
      
      .post-title {
      padding-bottom: 1px;
      margin-bottom: 1px;
      }
      
      .post-date {
        font-style: italic;
        margin-bottom: 30px;
      }
      a{
      text-decoration: none;
      }
      
    </style>

<div class="blog-container">
    {% 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>

你可以使用下面的代码作为参考。

<style>
*{
margin: 0;
padding: 0;
}

  .blog-container {
    display: grid;
  }
  
  .post-preview {
    padding: 20px;
    text-align: left;
  }
  
  .post-title {
  padding-bottom: 1px;
  margin-bottom: 1px;
  }
  
  .post-date {
    font-style: italic;
    margin-bottom: 30px;
  }
  a{
  text-decoration: none;
  }
  
</style>

<div class="blog-container">
  <div class="post-preview">
    <h2 class="post-title hover-underline-animation"><a href="url1" class="blue">Title: Lorem Ipsum has been the industry's standard</a></h2>
    <p class="post-date">01.01.2023</p>
    <div class="post-summary">
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
    </div>
  </div>
  <div class="post-preview">
    <h2 class="post-title hover-underline-animation"><a href="url1" class="blue">Title: Lorem Ipsum has been the industry's standard</a></h2>
    <p class="post-date">01.01.2023</p>
    <div class="post-summary">
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged
    </div>
  </div>
</div>

希望这有帮助

ymdaylpp

ymdaylpp3#

试试这个:

  • 只需通过CSS框模型
*{
         margin:0;
         font-family:sans-serif;
         }
         .post-title{
         font-weight: 500;
         font-size: 32px;
         }
         .post-title a{
         text-decoration:none;
         color: #33b8ee;
         }
         .post-date{
         color: #33b8ee;
         font-size: 28px;
         margin: 10px 0;
         }
         .post-summary{
         font-size: 28px;
         }
         .post-preview{
         margin-bottom:60px;
         }
<div class="blog-container">
         <div class="posts">
            <div class="post-preview">
               <h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">Title: Lorem ipsum dolor sit amet</a></h2>
               <p class="post-date">01.01.2023</p>
               <div class="post-summary">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
               </div>
            </div>
            <div class="post-preview">
               <h2 class="post-title hover-underline-animation"><a href="{{ post.url }}" class="blue">Title: Lorem ipsum dolor sit amet</a></h2>
               <p class="post-date">01.01.2023</p>
               <div class="post-summary">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
               </div>
            </div>
         </div>
      </div>

相关问题