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下方

回答

相關問題