側欄隨機從左向右跳，不記得觸摸CSS

我有點慌亂，因爲我根本找不到這一點。側欄隨機從左向右跳，不記得觸摸CSS

我想做一個標題，子標題，側邊欄，內容窗格和頁腳的簡單頁面佈局。我編寫了一切，它工作正常。然後我進入我的JavaScript文件來編寫函數，當我回來時，我的側邊欄從左側跳到右側，我根本找不到原因。我曾嘗試在一段時間內複製我的腳本，而且它似乎只是側邊欄被竊聽。任何有識之士將主要讚賞！

我的HTML：

<html lang ="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>....</title> 
    <link rel="stylesheet" type="text/css" href="../CSS/styleCss.css"> 
    <script type="text/javascript" src="../JavaScript/dateandtime.js"></script> 
</head> 
<body> 
    <div id="header"> 
     <a href="index.html"> 
      <img src="..." alt="..." height="200" width="500" /> 
     </a> 
</div> 

    <div id="subheader"> 
     <p id="timeStamp"><br/></p> 
    </div> 

    <div id="sidebar"> 
     <ul> 
      <li><a href="index.html">...</a></li> 
      <li><a href="underConstruction.html">...</a></li> 
      <li><a href="underConstruction.html">...</a></li> 
      <li><a href="registration.html">...</a></li> 
      <li><a href="underConstruction.html">...<br /></a></li> 
     </ul> 
    </div> 

    <div id="content">content area</div> 

    <div id="footer">footer</div> 

</body> 
</html>

我的CSS：

body{ 
    width:100%; 
    background-color:#e3f2fd; 
} 

#header { 
    width:1030px; 
    height:200px; 
    margin-left:50px; 
    background-color:#2196f3; 
    float:left; 
} 

#header img { 
    float:left; 
} 

#header h1 { 
    margin-left:550px; 
    color:black; 
    font-family:"arial black"; 
    font-size:40px; 
} 

#header p { 
    margin-left:550px; 
    color:white; 
    font-family:"arial black"; 
    font-style:italic; 
    font-size:200%; 
} 

#subheader { 
    position:relative; 
    margin-left:50px; 
    width:1030px; 
    height:75px; 
    background-color:black; 
    float:left; 
    border-top:1px solid red; 
} 

#subheader p { 
    margin-left:50px; 
    color:white; 
    font-family:"arial black"; 
    font-style:italic; 
    font-size:150%; 
    float: left; 
} 

#sidebar { 
    position:relative; 
    font-size:20px; 
    margin-top:75px; 
    background-color:#0d47a1; 
    width:230px; 
    height:600px; 
    border:1px solid red; 
    float:left; 
} 

#sidebar a { 
    text-decoration:none; 
    color:white; 
} 

#sidebar a:hover{ 
    background-color:black; 
    color:white; 
} 

#sidebar ul { 
    list-style-type:none; 
} 

#sidebar li { 
    padding-top:60px; 
    padding-left:0px; 
    font-family:"arial black"; 
} 

#content { 
    position:relative; 
    width:798px; 
    margin-top:-602px; 
    margin-left: 282px; 
    height:600px; 
    background-color:#90caf9; 
    float:left; 
    border-top:1px solid red; 
    border-bottom:1px solid red; 

} 

#footer { 
    position: relative; 
    height:150px; 
    width:1030px; 
    background-color:#82b1ff; 
    margin-left:50px; 
    float:left; 

}

我會認真欣賞任何幫助，我一定是失去了一些東西！

來源

2015-10-21 waffledave

你爲什麼'浮動：left'內容？試試'float：right' #content – kakajan

這會將內容移動到右側，但是它會在側邊欄上移動，並且仍然不會向左移動。 – waffledave

你可以與Js分享JsFiddle嗎？它會更容易地看到錯誤 – kakajan

請把所有的div在一個DIV像下面並更新一些CSS ID和類不需要保證金

<style type="text/css"> 
    .main-cont { 
     width: 1030px; 
     float: left; 
    } 

    #content { 
    margin-left: 0; 
     margin-top: 0; 
    } 
    #sidebar { 
     margin-top: 0; 
    } 
</style> 
<body> 

<div class="main-cont"> 
    <div id="header"> 
     <a href="index.html"> 
      <img src="..." alt="..." height="200" width="500" /> 
     </a> 
</div> 

    <div id="subheader"> 
     <p id="timeStamp"><br/></p> 
    </div> 

    <div id="sidebar"> 
     <ul> 
      <li><a href="index.html">...</a></li> 
      <li><a href="underConstruction.html">...</a></li> 
      <li><a href="underConstruction.html">...</a></li> 
      <li><a href="registration.html">...</a></li> 
      <li><a href="underConstruction.html">...<br /></a></li> 
     </ul> 
    </div> 

    <div id="content">content area</div> 

    <div id="footer">footer</div> 

    </div> 

</body>

來源

2015-10-21 06:20:26

感謝您的幫助。只是好奇，是使用主要的div div相同的想法相同的身體？我實際上從昨晚開始解決了我的問題，即將所有事物置於絕對位置：我認爲這是絕對的位置：相對的意思。 – waffledave

請投票我的問題，如果你喜歡我的負擔 –

多了一個解決方案，如果你不希望添加<div class="main-cont">只嘗試這個CSS

#subheader { 
    clear: both; 
    float: none; 
}

它將設置，所以你沒有必要添加「主 - 對照」 DIV

來源

2015-10-21 06:24:18

側欄隨機從左向右跳，不記得觸摸CSS

回答

相關問題