简体中文(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
446

背景

  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讲师

모든 응답(2)
洪涛
洪涛2017-04-17 17:41:16 2층

직접 질문하고 답해보세요.

이 질문은 완전히 제기되지 않았습니다.

친구가 지적한 대로 플로트가 기사용으로 설정되어 따로 보관되어 발생한 문제입니다. 플로트를 클리어하면 정상이 됩니다

좋다 +0
답글 추가
阿神
阿神2017-04-17 17:41:16 1층

부트스트랩을 사용하지 않나요?

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！