我正在创建一个单页面的网站。我在body标签中定位div时遇到问题。在代码中，搜索按钮假设我带有包含id“search”的div，但这与前一个id为“home”的div重叠。我检查了所有以前的标签，以确保它们已关闭，但我无法确定问题所在。此外，我的背景图片不会出现这些div标签。任何帮助将非常感激...下面是index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eVolunteers</title>
<!--links-->
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"><!--the title image-->
<link href="css/indexcss.css" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" />
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/dancing" rel="stylesheet" type="text/css"/>
<!--scripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="home">
<div style=" width:460px;height:180px; display: inline-block; float:left ;"><p class="heading" style="padding-top:50px; ">eVolunteers</p>
</div>
<div style= " width: 800px; height:180px; display: inline-block; float:right; " >
<ul class="ls" >
<li><a href="#home" class="round yellow">Home<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="#search" class="round agreen">Search<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="#contact" class="round purple">Contact<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="#about" class="round gray">About Us<span class="round">About the developers.</span></a></li>
<li><a href="login.html" class="round green">Login<span class="round">That is, if you already have an account.</span></a></li>
<li><a href="signup.html" class="round red">Sign Up<span class="round">But only if you really, really want to. </span></a></li>
</ul>
</div>
</div>
</div>
<!--slider-->
<div id="search" class="sb">
<p>Hello</p>
</div>
<div id="contact" class="cb">
<p>Hello</p>
</div>
<div id="about" class="ab">
<p>Hello</p>
</div>
</body>
</html>
这是css
.sb{
border: 5px solid red;
padding-top: 800px;
}
.cb{
border: 5px solid green;
background: url('homepage.jpg');
}
.ab{
border: 5px solid black;
}
.heading {
font-family: 'DancingScriptOTRegular';
font-weight: bold;
font-style: normal;
font-size: 60px;
text-align:right;
}
.ls{
padding-left: 60px;
}
/* login and sign up css*/
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul {
margin: 30px auto;
text-align: center;
}
li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
@-moz-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 300px;
z-index: 1;
border-width: 4px;
border-style: solid;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 33px;
padding-top: 38px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 10px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
a.red {
background-color: rgba(239,57,50,1);
color: rgba(133,32,28,1);
border-color: rgba(133,32,28,.2);
}
a.red:hover {
color: rgba(239,57,50,1);
}
a.yellow{
background-color: rgba(255,255,0,1);
color: rgba(255,165,0,1);
border-color: rgba(255,165,0,.2);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.agreen{
background-color: rgba(0,255,0,1);
color: rgba(0,128,0,1);
border-color: rgba(0,128,0,.5);
}
a.yellow:hower{
color: rgba(255,255,0,1);
}
a.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
a.green:hover {
color: rgba(1,151,171,1);
}
a.purple{
background-color: rgba(221,160,221,1);
color: rgba(128,0,128,1);
border-color: rgba(128,0,128,.8);
}
a.purple:hover {
color: rgba(221,160,221,1);
}
a.gray{
background-color: rgba(169,169,169,1);
color: rgba(3,3,3,1);
border-color: rgba(3,3,3,.2);
}
a.gray:hover {
color: rgba(3,3,3,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #fff;
}
.round span:hover {
opacity: .85;
font-size: 16px;
-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}
.red span {
background: rgba(133,32,28,.7);
}
.yellow span{
background: rgba(255,165,0,.7);
}
.agreen span{
background: rgba(0,128,0,.7);
}
.purple span{
background: rgba(128,0,128,.9);
}
.gray span{
background: rgba(3,3,3,.9);
}
/*slider*/
#slides {
display:none;
}
答案 0 :(得分：0)
您的问题与#home中的内容有关。当您浮动某些东西时，它会将其从正常的文档流中取出。由于#home的子元素浮动#home最终会崩溃，即没有高度。
使用您提供的CSS，您可以看到您的search DIV已根据您提供的红色边框位于页面顶部。所以没有理由去跳＃34;至#search，因为它位于顶部。
我建议您使用micro clearfix，以便#home DIV占用您期望的空间。还有其他选择，但我会留给你发现。
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
在下面的jsFiddle中，我删除了#search的填充，该填充也由.sb类设置，并将填充添加到#home DIV（用于说明目的） padding-bottom: 800px;。我已将clearfix添加到#home以清除其中包含的浮点数。
#home {
padding-bottom: 800px;
}
.sb {
border: 5px solid red;
/* moved padding to #home as bottom padding for illustrative purposes */
}
<div id="home" class="cf">
jsFiddle：http://jsfiddle.net/mct84jbj/1