简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
python - jinja2模板继承的问题（实际是清除浮动的问题）
PHP中文网
PHP中文网 2017-04-17 17:39:16
0
2
447

背景

  1. 环境如题：win + python3 + flask + jinja2。

  2. 初学python，在做一个博客工具练习flask，sql目前只有入门知识。

问题

  1. 模板使用中遇到一个p的高度不能自适应的问题，代码大致如下：

    • layout.html：如下

      <!doctype html>
<head>
    <title>FLASK</title>
</head>

<body>
    <p class=page>
        <header>
            <p>放的登陆/logo等玩意儿</p>
        </header>
        <nav>
            <ul>
                <li style="width: 5%"><a href="{{url_for("show_entries")}}">首页</a></li>
                <li><a href="#">标签预留</a></li>
            </ul>
        </nav>
        {% block body %}{% endblock %}
    </p>
</body>

    • show_entries.html:如下

      {% extends "layout.html" %}
{% block body %}
        <p id="crumb_l" class=breadcrumb>
            <span>&nbsp;你的位置：</span>
            <a href="{{url_for("show_entries")}}">首页</a>
        </p>
        <article>
            {% for entry in entries %}
                <h2>放的文章列表（标题+摘要）</h2>
            {% endfor %}
        </article>

        <aside>
            <h2 class=title-in-container style="color:#666">最热文档 Top 10</h2>
            <ul>
                <h2>放的文章列表（纯标题）</h2>
            </ul>
        </aside>
{% endblock %}

    • css中的部分内容如下：

      .page {
    margin: 0.5em auto;
    width: 60em;
    border: 1px solid #ccc;
    padding: 0.8em;
    background: #FAFFFA;
    box-shadow:0px 1px 2px #ddd;
}

article{ 
    margin: 1em auto;
    padding: 0.8em;
    float: left;
    width:38em; 
    overflow:hidden; 
    border-top: 1px solid #eee
}

aside{ 
    margin: 1em auto;
    padding: 0.8em;
    float: right;
    width:15em; 
    border: 1px solid #ddd;
    box-shadow:0px 1px 2px #eee;
    overflow:hidden; 
}

  2. 具体问题如下图，.page的效果（类似纸张的感觉）没能覆盖整个网页。

我做的尝试

  1. 将 show_entries extends layout.html 改成 layout.html include show_entries，没有效果。

  2. 不知道还能怎么试了。。。。

想请教这个问题该如何解决。

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(2)
洪涛
洪涛2017-04-17 17:41:16 2 floor

Ask and answer your own question.

This question is not fully mentioned.

As suggested by a friend, it is because article and aside are set to float. After clearing the float, everything will be normal

Like +0
Add Reply
阿神
阿神2017-04-17 17:41:16 1 floor

Don’t you use bootstrap?

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！