Div在窗口大小调整时移动到其他div下方

我是web dev的新手，需要一些帮助来找出这个简单问题。调整大小时菜单项移动到名称下面，有人可以告诉我我在哪里搞砸了吗？Div在窗口大小调整时移动到其他div下方

我一直在阅读一些其他的解决方案，并得到的想法，但无法找到我的错误。

> 
<!doctype html> 
<html> 
<head> 
    <title>About</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

<style type="text/css"> 

    * { 
     font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; 
    } 



    body { 
     background-color: #FAFAFA; 
     color: #2E2E2E; 

    } 

    #topmenu { 
     float: right; 
     padding-top: 10px; 
     position: relative; 

} 

    #topmenu ul { 
     list-style:none; 
     width: auto; 


    } 

    #topmenu li { 
     float:left; 
     padding: 5px 10px 0px 20px; 
     margin-right: 20px; 
     border-right: 1px solid #47008F; 
     text-decoration: underline; 

    } 

    a:hover { 

     font-size: 20px; 
    } 

    a:link { 
     color: #47008F; 
    } 


    #name { 
     margin-bottom: 10px; 
     padding-left: 20px; 
     color: #47008F; 
     display:inline-block; 

    } 

    #topcontainer { 
     width: 100%; 
     background-color: #A4A4A4; 
     height: 60px; 
     margin-bottom: 5px; 
     font-family: Lucida Grande; 
     margin-right: 50px; 
     border-radius: 25px; 
     float: left; 

    } 

    #break { 
     background-color:#47008F; 
     height: 1px; 
     margin-bottom:5px; 
     clear: both; 
    } 

    #midcontainer { 

     clear:both 
     padding-left: 50px 

    } 

    #midcontainer img { 
     position: relative; 
     height:300px; 
     padding: 20px 200px 50px 200px; 
     float: left; 
     padding-right:50px; 
    } 

    #bio { 
     padding-top: 75px; 
     position: relative; 
    } 


</style> 


</head> 

<body> 

    <div id="topcontainer"> 




      <h1 id="name">Robert</h1> 

      <div id="topmenu"> 

       <ul> 
        <li><a href="PersonalPage.html">About</a></li> 
        <li><a href="PersonalPageResume.html">Resume</a></li> 
        <li><a href="PersonalPagePortfolio.html">Portfolio</a></li> 
        <li><a href="PersonalPageContact.html">Contact</a></li> 
       </ul> 

      </div> 

     </div> 


     <div id="break"></div> 
    </div> 



    <div id="midcontainer"> 

    <img src="images/me.jpg"/> 

     <div id="bio"> 

      <p> 
      <h3> Text goes here.............</h3> 
       <p> 
       something 
       </p> 

      </p> 

     </div> 

    </div> 

</body> 
</html>

来源

2015-02-11 sysofadown3

你的div不排队。你有更多的关闭divs然后打开divs ...提示：真正的缩进。这将有助于在扫描中看到问题。另外，请在此处删除提交的代码部分中的空行。使其更易于阅读。 – zipzit 2015-02-11 04:42:05

提供了一个jsfiddle，以便我们可以帮助您更多... – winresh24 2015-02-11 04:54:40

我已评论顶部容器的“高度”，并删除了不需要的闭合div标签。它适用于Chrome。

<!doctype html> 
<html> 
<head> 
    <title>About</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

<style type="text/css"> 

    * { 
     font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; 
    } 


    body { 
     background-color: #FAFAFA; 
     color: #2E2E2E; 

    } 

    #topmenu { 
     float: right; 
     padding-top: 10px; 
     position: relative; 

} 

    #topmenu ul { 
     list-style:none; 
     width: auto; 


    } 

    #topmenu li { 
     float:left; 
     padding: 5px 10px 0px 20px; 
     margin-right: 20px; 
     border-right: 1px solid #47008F; 
     text-decoration: underline; 

    } 

    a:hover { 

     font-size: 20px; 
    } 

    a:link { 
     color: #47008F; 
    } 


    #name { 
     margin-bottom: 10px; 
     padding-left: 20px; 
     color: #47008F; 
     display:inline-block; 

    } 

    #topcontainer { 
     width: 100%; 
     background-color: #A4A4A4; 
     /*height: 60px;*/ 
     margin-bottom: 5px; 
     font-family: Lucida Grande; 
     margin-right: 50px; 
     border-radius: 25px; 
     float: left; 

    } 

    #break { 
     background-color:#47008F; 
     height: 1px; 
     margin-bottom:5px; 
     clear: both; 
    } 

    #midcontainer { 

     clear:both 
     padding-left: 50px 

    } 

    #midcontainer img { 
     position: relative; 
     height:300px; 
     padding: 20px 200px 50px 200px; 
     float: left; 
     padding-right:50px; 
    } 

    #bio { 
     padding-top: 75px; 
     position: relative; 
    } 


</style> 


</head> 

<body> 

    <div id="topcontainer"> 
     <h1 id="name">Robert</h1> 
     <div id="topmenu"> 
      <ul> 
       <li><a href="PersonalPage.html">About</a></li> 
       <li><a href="PersonalPageResume.html">Resume</a></li> 
       <li><a href="PersonalPagePortfolio.html">Portfolio</a></li> 
       <li><a href="PersonalPageContact.html">Contact</a></li> 
      </ul> 

     </div> 
     <div id="break"></div> 
    </div> 

    <div id="midcontainer"> 

     <img src="images/me.jpg" /> 

     <div id="bio"> 

      <p> 
       <h3>Text goes here.............</h3> 
       <p> 
        something 
       </p> 

      </p> 

     </div> 

    </div> 

</body> 
</html>

来源

2015-02-11 04:57:12

我在Chrome中运行它，它有点作品，因为当菜单项下降时，灰色条会展开。但我希望它能够在右上角固定下来，我不希望任何文字移动。感谢您的全力协助。 – sysofadown3 2015-02-13 00:18:20

我需要添加另一个div包装我所有的html，并设置边距为自动和960px的宽度。解决了！

来源

2015-02-13 02:19:38 sysofadown3

你只是瞄准了一个1024像素宽的屏幕？ – 2015-02-13 04:31:53

Div在窗口大小调整时移动到其他div下方

回答

相关问题