我的页面末尾有两个 div 我想将第二个放在页面的第一个和末尾之间。像这样:
| | | | | |
| | | | | |
| | div1 | |div2| |
| | | | | |
| | | | | |
“Div 2”应该位于“div 1”和页面末尾之间。我尝试了我所知道的一切，但没有任何效果。
我的 HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="teste.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="teste.js"></script>
<title>Example</title>
</head>
<body>
<div id="header">
<div class="title"">Example</div>
</div>
<div id="main-body">
<ul class="nav-tabs">
<li class="active-tab"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
<div id="right-menu"></div>
<footer>
</footer>
</body>
</html>
还有我的 CSS:
/* Fonte Nunito a ser usada no título */
@import url(http://fonts.googleapis.com/css?family=Nunito);
/*----------------------------------------------*/
/* Cor do fundo da página */
body {
background-color: #cccccc;
}
/*----------------------------------------------*/
/* Header */
/* Cor e tamanho */
#header {
background-color: #669966;
background-size: cover;
height: 100px;
width: 100%;
clear: both;
margin: 0;
padding: 0;
position: relative;
}
/* Título */
#header .title {
color: #cccccc;
font-family: Nunito;
font-size: 50px;
font-style: italic;
line-height: 46px;
left: 60px;
top: 30px;
position: absolute;
}
/*----------------------------------------------*/
/* Tabs */
.nav-tabs {
background-color: #cccccc;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
/* Tab cells */
.nav-tabs li {
background-color: gray;
color: white;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
/* Tab ativa */
.active-tab {
background-color: white;
color: red;
font-size: 1.2em;
padding: 10px 90px 10px 90px;
border-radius: 8px 8px 0 0;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
/*----------------------------------------------*/
/* Main body (this is "div 1")*/
#main-body {
background-color: white;
height: 100vh;
width: 900px;
margin: 5px 0 5px 100px;
display: inline-block;
}
/*----------------------------------------------*/
/* Menu à direita(this is "div 2") */
#right-menu {
border: 2px solid red;
background-color: yellow;
height: 30px;
width: 50px;
display: inline-block;
}
/*----------------------------------------------*/
/* Footah */
footer {
background-color: #333333;
height: 200px;
width: 100%;
margin: 0;
padding: 0;
}
有人可以帮忙吗？
[编辑] 感谢所有发布解决方案的人。问题解决了!
最佳答案
你越来越近了。
您需要制作两个外部 div，它们将一起保持页面的整个宽度(一个用于主列，宽度为 70%，另一个用于右侧列，宽度为 30%)。然后在你的右栏中，放置另一个固定宽度的 div 并使用 text-align: center on the outer div。
关于html - 居中div的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31653969/