用css删除间隔(主和侧div)
用css删除间隔(主和侧div)
提问于 2015-09-28 10:16:58
我在Rails应用程序中有以下问题(但问题是关于css的)：在我的css中，我有两个div:一个用于主内容，另一个用于侧(列菜单)内容。问题是:当我插入侧内容时，它会将主div的内容推到底部。我用花言巧语解释得更好。
图1：
图2：
我想修好这东西。因此，我想删除空白，但我想拥有所有的菜单图标。我该怎么做？
我的application.html.erb：
<!DOCTYPE html>
<html>
<head>
<title>name</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body class="<%= controller.controller_name %>">
<div id="banner">
<%= @page_title || "name" %>
</div>
<div id="columns">
<div id="side">
<ul class="nav nav-pills nav-stacked">
<li><a href="#"><i class="fa fa-home fa-fw"></i>Home</a></li>
<li><%= link_to "Nuovo contatto", companies_new_path ,class: "glyphicon glyphicon-pencil"%></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-file-o fa-fw"></i>Pages</a></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-bar-chart-o fa-fw"></i>Charts</a></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-table fa-fw"></i>Table</a></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-tasks fa-fw"></i>Forms</a></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-calendar fa-fw"></i>Calender</a></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-book fa-fw"></i>Library</a></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-pencil fa-fw"></i>Applications</a></li>
<li><a href="http://www.jquery2dotnet.com"><i class="fa fa-cogs fa-fw"></i>Settings</a></li>
</ul>
</div>
<div id="main">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>
</div>
</div></div> <!-- FINE DIV BODY -->
</body>
</html>我的application.css
/*
* 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 fullcalendar
*= require_self
*= require jquery.ui.all
*= require_tree .
*/
#banner {
background: #282827;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 20px/20px "Times New Roman", serif;
color: #141414;
text-align: left;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #646462;
#main {
margin-left: 17em;
padding: 2em;
background: white;
}
#side {
color: red;
float: left;
padding: 1em 2em;
width: 13em;
background: #646462;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}Stack Overflow用户
回答已采纳
发布于 2015-09-28 10:24:11
使边菜单位置固定。因此，它不会重叠在主div上。也许这会对你有帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32820587
复制相关文章
相似问题
腾讯云开发者
