Question

我正在使用烧瓶利用jinja模板进行项目。我的layout.html文件包含一个灰色的容器，扩展到所有其他子页面。对于扩展layout.html的其中一个页面，我有一个图像，我想在容器外面浮动。我尝试将css位置设置为绝对无效。除了使页面与layout.html分开之外，还有什么我可以做的吗？我想保留容器。

这是layout.html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" type="{{url_for('static',filename ='img/favicon-32x32.png')}}" sizes="32x32" />
    <title>Foodie</title>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
         <ul class=flashes>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      {% endif %}
      {% endwith %}
 <link rel="stylesheet" href="{{url_for('static', f   ilename='css/main.css') }}">
   <link rel="stylesheet" href="{{url_for('static', filename='css/style.css') }}">
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo"><a href="{{ url_for('home') }}">Test1</a></h1>
    <ul class ="about" style= "list-style: none">
      <li><a href="{{ url_for('demo') }}" target="_blank">Test2</a></li>
    </ul>
      </div>
    </header>
    <div class="container">
      {% block content %}
      {% endblock %}
    </div>
  </body>
</html>

这是home.html包含我想要向左浮动的图像[具有页脚ID的div。

 {% extends "layout.html" %}
    {% block content %}
 {% if error %}
  <p class="flash">Error:{{ error }}
 {% endif %}
 <div id="home_city" class="jumbo">
    <div class="search-form" align="center">
      <h1> Welcome, tell us where you are from: </h1>
        <form class="form-container" action="/home_city" method="post" autocomplete="on">
         <input type="text" class="search-field" name="city" required placeholder="Enter your home City" />
     <div class="submit-container">
           <input type="submit" value="" class="submit"/>
         </div>
      </form>
     </div>
    <div align="center">
         <ul id="random">
          <li>#COFFEE</li>
          <li>#OMG</li>
          <li>#LATTE</li>
          <li>#Starbucks</li>
          <li>#Chocolate</li>
          <li>#Yummy</li>
          <li>#Lunch</li>
          <li>#THATPLATE</li>
          <li>#FOODIE</li>
          <li>#ROOTS</li>
          <li>#FINEDINING</li>
          <li>#VEGLIFE</li>
          <li>#NOMSNOMS</li>
          <li>#Breakfast</li>
          <li>#Don'tbitethehandthatfeedsyou</li>
          <li>#SWEETS</li>
          <li>#Tapas</li>
          <li>#Rice</li>
         </ul>
    </div>
 </div>
 <div id = "footer">
    <img src ="{{url_for('static',filename ='img/Powered_By_Yelp_Black 2.png')}}" alt="Powered by Yelp">
    <div id="beta">
        <h1>BETA</h1>
</div>
</div>
{% endblock %}

最后但并非最不重要的，这是css文件：

body {
    margin: auto 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #444;
      }


header {
  background-color: #2B2B2B;
  height: 35px;
  width: 100%;
  margin-top: -21px;
  padding: 0;
   }

 header h1.logo > a {
  margin: 0;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  float: left;
  text-decoration: none;
 }

header h1.logo:hover > {
  color: #fff;
  text-decoration: none;
   }
.container {
  width: 940px;
  margin: 0 auto;
 }

header ul.about li{ 
  margin:10px 0;
  font-size: 20px;
  float: right;
  display: inline-block;
  padding-right: 20px;
 }
li > a {
 color: #fff;
 text-decoration: none;
}

div.jumbo {
  padding: 30px 0 90px 0;
  background-color: #eeeeee;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
      border-radius: 6px;
      margin: 33px;
 }
h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 31px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
 }
div > h2{

font-size: 2em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}


div > p {
font-size: 1.5em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
h1 > p {
font-size: 3em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}

#random {
   font-size: 45px;
   height: 100px;
   width: 33%;
   float: center;
   text-align: center;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#random li {
    text-decoration: none;
    list-style-image: none;
    list-style-type: none;
}
/* Message flashing */
.flash {
  background-color: #FBB0B0;
  padding: 10px;
  width: 400px;
  font-style: normal;
  font-family: "Times New Roman", Times, serif;

 }

.footer {
    position:fixed;
    left:;
}

.footer > #beta {
    bottom : 0;
    font-size: 70px;
    font-family:"Trebuchet MS", Helvetica, sans-serif;
    text-align: center;
}

ul .rest_result {
    font-size: 30px;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    text-transform: capitalize;

 }
.food_choice li {
   display: none;
   text-align: center; 
 }
.food_choice .active {
    display: block;
 }
.About {
    font-family: ff-clan-web-pro-wide,sans-serif;
    font-weight: 400;
 }

Answer 1

添加到您的css：

#footer > img {
margin-left: -3em;
}

将值调整为图像宽度。

在您的CSS中，您似乎还有一个课程footer - .footer，但在html中您有一个id - id = "footer"。

在处理Jinja模板时，如何将图像悬浮在容器外部？

1 个答案: