如何讓2個div彼此相鄰？

我需要使屏幕左側的導航條和文本div才能從導航欄旁邊開始。我只設法使文本div一直走到屏幕的右側。到目前爲止，我有這樣的：如何讓2個div彼此相鄰？

HTML

<head> 

<link rel = "stylesheet" type = "text/css" href = "styles.css"> 
<title>Homepage</title> 

</head> 

<body> 
<div id = "header"> 
    <h1>Homepage - origins of World Wide Web and the Internet</h1> 
</div> 
<div id = "wrapper"> 
    <div id = "navbar"> 
     <ul> 
     <li><a class = "active" href="index.html">HOMEPAGE</a></li> 
     <li><a href="news.asp">INTERNET PIONEERS</a></li> 
     <li><a href="contact.asp">HTTP</a></li> 
     <li><a href="about.asp">TERMINOLOGY</a></li> 
     <li><a href="about.asp">REFERENCES</a></li> 
     </ul> 
    </div> 

    <div id = "text"> 
     <h2>World Wide Web</h2> 

    </div> 
</div>

CSS：

#header { 


width: 97%; 
    height: 70px; 
    background: black; 
    position: relative; 
    border: 5px solid white; 
    margin: 20px; 
} 

#header:after { 
    content: ''; 
    position: absolute; 
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -15px; 
    background: #600202; 
    z-index: -1; 
} 

#header h1 { 
    font-family: Arial; 
    color: white; 
    text-align: center; 
} 



#navbar { 
    padding-left: 8px; 
    margin:5px; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 15%; 
    background-color: #f1f1f1; 
    position: fixed; 
    overflow: auto; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
} 

#navbar li a { 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

#navbar li a:hover { 
    background-color: #555; 
    color: white; 
} 

#navbar li a.active { 
    background-color: #600202; 
    color: white; 
} 


#navbar li { 
    text-align: center; 
    border-bottom: 5px solid black; 
} 

#navbar li:last-child { 
    border-bottom: none; 
} 

#text { 
    border:1px solid black; 

}

來源

2016-10-29 Marino Bjelopera

您不應該使用'position：absolute;'這裏，float或display可以更加高效。 –

但是那個位置：絕對的;是爲頭部div，不應該有任何與它下面的內容？或者我錯了 –

你是對的，我有一個太快的樣子，你也可以使用盒子陰影，並放棄這個絕對的僞造:)（我只是注意到我錯過了你的CSS的一部分，我的壞連接） –

如Javier所述，由於position:fixed和float:left的混合存在問題，因此元素已從文檔流中移除，因此百分比寬度計算不正確。

有一些問題的代碼，我們需要照顧的第一：

1）的position:fixed是#navbar ul一部分，但如果你將滾動，導航欄容器也會隨着文字滾動，那麼固定導航將隨其父容器一起滾動。

2.）寬度在ul元素中定義（防止元素伸展到適當的長度），元素本身的位置是固定的，這就是爲什麼父元素本身沒有寬度（因爲元素不是呈現爲周圍的文檔流程的一部分），這是使用float:left

一個解決辦法...當爲什麼#text元件位於#navbar元以下

...可能是移動position: fixed到#navbar元素Ñ限定固定的左邊距爲#text元件：

#text { 
    margin-left: 240px; 
    border: 1px solid black; 
} 

#navbar { 
    padding-left: 8px; 
    margin: 5px; 
    width: 220px; 
    position: fixed; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #f1f1f1; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
}

我創建包含完整的變化here小提琴。

來源

2016-10-29 11:59:48 SaschaM78

非常感謝謝謝:) –

#navbar { 
    padding-left: 8px; 
    margin:5px; 
    float: left; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    /*width: 15%;*/ 
    background-color: #f1f1f1; 
    /*position: fixed;*/ 
    overflow: auto; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
} 

#text { 
    border:1px solid black; 
    float: left; 
}

來源

2016-10-29 11:36:53

試過，但比文本div在導航欄下面。 –

規則'#navbar ul'被設置爲'固定'的寬度'15％'。刪除那些（我更新了答案）。 –

我試圖幫助 –

我試圖與代碼哈維爾·雷伊寫的，和它的工作正是你想要的方式。嘗試暫時刪除與nav和div相關的樣式，這是因爲邊距和填充。

來源

2016-10-29 11:50:14

如何讓2個div彼此相鄰？

回答

相關問題