这是一个 Ruby on Rails 应用程序,我无法在页面顶部获取正文。截屏:
我不知道为什么会发生这种情况,因为我已经正确设置了所有属性。这是整个应用程序的来源。 我的观点:
<div id="header-wrap">
<div id="header">
<h1>Blog</h1>
</div>
</div>
<div id="wrapper">
<div id="posts">
<% @posts.each do|post| %>
<div id="post">
<h2><%= post.title %></h2>
<%= simple_format post.body %>
<small>
<%= link_to 'Edit', edit_post_path(post) %> |
<%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
</small>
</div>
<% end %>
</div>
<br>
<%= link_to 'New Post', new_post_path %>
</div>
我的 CSS(注释掉的 CSS 是我编写的通过更改 header-wrap 和 wrapper 元素的定位来解决问题的 hack):
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*= require twitter/bootstrap
*/
html, body, {
background-image:url('bg.png');
background-color:#cccccc;
padding: 0;
margin: 0;
}
#header-wrap {
background-color: #424242;
/* position: absolute;*/
height: 100px;
width: 100%;
top: 0;
}
#header {
margin: 0 auto;
color: #FFFFFF;
width: 588px;
}
#wrapper {
/* position: relative;
top: 100px;*/
padding: 0 6px;
margin: 0 auto;
width: 588px;
}
#posts {
}
#notice {
color: green;
}
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
#error_explanation {
width: 450px;
border: 2px solid red;
padding: 7px;
padding-bottom: 0;
margin-bottom: 20px;
background-color: #f0f0f0;
h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
margin-bottom: 0px;
background-color: #c00;
color: #fff;
}
ul li {
font-size: 12px;
list-style: square;
}
}