侧边栏位置不正确

Question

我正在创建一个简单的网站，但无法正确定位侧边栏。它应该位于内容的右侧，但它一直放在内容的下方。

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>

<div class="content">
  <h1>Inhalt</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

<div class="sidebar"></div>

文本是德语的，应该没有什么区别。另外，“.sidebar”是侧边栏，它应该位于“.content”的右侧。

Answer 1

除非您指定 display 属性，否则 div 默认情况下将具有 display: block;，它将 div 一个堆叠在另一个之上。

一种解决方案是使用 display: flex 创建一个包装 div

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content-outer {
  display: flex;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>

<div class="content-outer">
  <div class="content">
    <h1>Inhalt</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="sidebar"></div>
</div>

Answer 2

您可以在 div 中添加 content 和 sidebar。给该 div 一个相对位置，并将 sidebar 位置设置为绝对位置，如下所示。

* {
  font-family: verdana;
  background-color: lightgray;
}

p {
  font-size: 2vh;
}

.logo {
  padding-left: 3vw;
}

.navbar {
  background-color: #383838;
  width: 100vw;
  height: 7vh;
}

.navbar a {
  font-size: 5vh;
  text-decoration: none;
  background-color: #383838;
  color: white;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 0.75vh;
  border-right: 0.2vw solid white;
}

.content-outer{
  position: relative;
}

.content {
  width: 70vw;
  height: 80vh;
  background-color: white;
  padding-top: 0.5vh;
  margin-left: 0;
}

.content h1,
.content p {
  background-color: white;
  color: black;
  margin-left: 3vw;
  margin-right: 3vw;
}

.sidebar {
   position: absolute;
   right: 0;
   top: 0;
  background-color: orange;
  width: 10vw;
  height: 80vh;
}

<h1 class="logo">Logo</h1>

<div class="navbar">
  <a href="www.google.com">Home</a>
  <a href="www.google.com">Produkte</a>
  <a href="www.google.com">Ueber mich</a>
</div>
<div class="content-outer">
  <div class="content">
    <h1>Inhalt</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="sidebar"></div>
</div>