如何在一页中以2行或3行显示文章？

Question

我一直在用python、flask、sqlalchemy和html制作博客

现在我可以在页面中显示文章了。 但是我只能在一行中显示它，就像下面的代码一样，顺便说一下，我不能使用css文件

*第1条

*第2条

*第3条

*第4条

我想做的事情就在下面

*第1条*第3条

*第2条*第4条

{% extends "copy.html" %}
{% block body %}
{%for article in articles%}
<li>{{article.title}}
<a href="{{url_for('show_article',id=article.id)}}">Details</a>
</li>
{%else%}
None articles
{%endfor%}
{%endblock%}

如何实现它

Answer 1

看看我在这里的帖子posts about flask和我在pil.glitch.me或flask site上的flask应用程序的结构，如果你想知道。。。 你应该在html文件中创建两列，在ptyhon文件中，你应该在不同的列表中将奇数和偶数分开。 附言：我不知道你是想把奇数的柱子放在一列，把偶数的柱子放在另一列，还是想把前半部分放在左列，另一半放在另一列。在第二种情况下，您只需要使用post1=posts[：int（len（posts）/2）]和post2=posts[len（post1）：]创建两个列表

@app.route("/")
def home():
    posts = [
        {"title" : "post1.",},
        {"title" : "post2.",},
        {"title" : "post3.",},
        {"title" : "post4.",},]

post1 = [x for x in posts if x % 2 == 0]
post2 = [x for x in posts if x % 2 != 0]

return render_template("info.html", post1 = post1, post2=post2)

然后将它们发送到html文件，如下所示：

{% extends 'template.html' %}
{% block page %}
<div class="container">
   {% for post in posts %} <!  iterate all posts keys/values  >
      <div class="row">
         <div class="col-md-6"> <h3>{{ post1.title }}</h3> </div>
         <div class="col-md-6"> <h3>{{ post2.title}}</h3> </div>
      </div>
  {% endfor %}
</div>  
{% endblock %}

要使用引导，请在模板中复制此代码：

        <link href="https://fonts.googleapis.com/css?family=Literata&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>