我怎样才能让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

#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 2

我用 Javier Rey 写的代码试过了，它完全按照你想要的方式工作。尝试暂时删除与导航和 div 相关的样式，这是因为边距和填充。

Answer 3

正如 Javier 已经提到的，问题是由于 position:fixed 和 float:left 的混合而存在的，百分比宽度计算不正确，因为该元素已从文档流中删除。

我们需要首先处理代码中的一些问题：

1.) position:fixed 是 #navbar ul 的一部分，但如果您要滚动，导航栏容器也会随文本一起滚动，然后固定导航会随其滚动父容器。

2.) 宽度在ul元素中定义（防止元素拉伸到合适的长度），元素本身定位固定，这就是为什么父元素本身没有宽度（因为该元素未呈现为周围文档流的一部分），这就是为什么 #text 元素在使用 float:left

时位于 #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;
}

我创建了一个包含完整更改的 fiddle here。

我怎样才能让2个div彼此相邻？

How can I make 2 divs be next to each other?

html

css

position