如何在一个页面中显示 2 或 3 行的文章？

Question

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

现在我可以在页面中显示文章了。但我只能用下面的代码将它显示在 1 行中，如下面的代码。顺便说一下，不知何故我不能使用 css 文件。

*第1条

*第2条

*第3条

*第四条

我想做的事情就像下面这样。

*第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

如果您想了解一下，请查看我在此处发布的有关烧瓶和烧瓶中的应用程序结构的帖子，如果您想了解的话...您应该在 html 文件和ptyhon 文件，您应该将不同列表中的奇数帖子与偶数帖子分开。PS：我不知道你是想把奇数的帖子放在一列，偶数放在另一列，还是你想把前半部分放在左列，另一半放在另一列。在第二种情况下，您只想使用 post1 = posts[:int(len(posts)/2)] 和 post2 = posts[len(post1):] 创建两个列表。@app.route("/")def home():&nbsp; &nbsp; posts = [&nbsp; &nbsp; &nbsp; &nbsp; {"title" : "post1.",},&nbsp; &nbsp; &nbsp; &nbsp; {"title" : "post2.",},&nbsp; &nbsp; &nbsp; &nbsp; {"title" : "post3.",},&nbsp; &nbsp; &nbsp; &nbsp; {"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">&nbsp; &nbsp;{% for post in posts %} <!-- iterate all posts keys/values -->&nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-md-6"> <h3>{{ post1.title }}</h3> </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="col-md-6"> <h3>{{ post2.title}}</h3> </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; {% endfor %}</div>&nbsp;&nbsp;{% endblock %}要使用引导程序，请在模板中复制此代码：&nbsp; &nbsp; &nbsp; &nbsp; <link href="https://fonts.googleapis.com/css?family=Literata&display=swap" rel="stylesheet">&nbsp; &nbsp; <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>