div 位置不对

Question

我正在创建一个单页网站。我在 body 标签中定位 divs 时遇到问题。在代码中，搜索按钮应该带我到包含 id "search" 的 div 所在的位置，但这在某种程度上与之前的 div 和 id 为 "home" 重叠].我检查了所有以前的标签以确保它们已关闭，但我无法找出问题所在。此外，我的背景图片不会显示这些 div tags.Any 帮助将不胜感激...下面是 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;
    }

Answer 1

您的问题与您在 #home 中的内容被浮动有关。当您浮动某些内容时，它会脱离正常的文档流。由于 #home 的子元素是浮动的 #home 最终会折叠，即没有高度。

根据您提供的 CSS，您可以看到您的 search DIV 根据您给它的红色边框已经在页面顶部。所以它没有理由 "jump down" 到 #search 因为它在顶部。

我建议使用 micro clearfix，这样您的 #home DIV 就会占用您期望的 space。还有其他选择，但我会留给您去发现。

.cf:before,
.cf:after {
    content: " ";
    display: table;
}    
.cf:after {
    clear: both;
}

在下面的 jsFiddle 中，我从 #search 中删除了填充，这也是您的 .sb class 的样式，并将填充添加到您的 #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

div 位置不对

div not in proper place

html

css

alignment