如何使2個div彼此相鄰？

Question

我需要在屏幕左側創建導航欄，並在導航欄旁邊立即開始文本div。 我只設法使文本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;

}

Answer 1

我用哈維爾·雷伊（Javier Rey）編寫的代碼進行了嘗試，它完全按照您想要的方式工作。 嘗試暫時刪除與nav和div相關的樣式，這是由於頁邊距和填充的原因。

Answer 2

#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;
}

Answer 3

正如Javier所提到的，由於position:fixed和float:left的混合使用，因此存在問題，因為從文檔流中刪除了該元素，所以寬度百分比計算不正確。

我們首先需要處理一些代碼問題：

1.） position:fixed是#navbar ul一部分，但如果您要滾動，則navbar容器也將與文本一起滾動，然后固定導航將與其父容器一起滾動。

2.）寬度是在ul元素中定義的（防止元素拉伸到適當的長度），該元素本身的位置是固定的，這就是為什么父元素本身沒有寬度的原因（因為該元素未呈現為周圍的文檔流），這就是使用float:left時#text元素位於#navbar元素下方的#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;
}

我創建了一個包含完整的變化小提琴這里。

如何使2個div彼此相鄰？

問題描述

3 個解決方案

解決方案1
1 2016-10-29 11:50:14

解決方案2
0 2016-10-29 11:36:53

解決方案3
0 已采納 2016-10-29 11:59:48

如何使2個div彼此相鄰？

問題描述

3 個解決方案

解決方案1 1 2016-10-29 11:50:14

解決方案2 0 2016-10-29 11:36:53

解決方案3 0 已采納 2016-10-29 11:59:48

解決方案1
1 2016-10-29 11:50:14

解決方案2
0 2016-10-29 11:36:53

解決方案3
0 已采納 2016-10-29 11:59:48