侧边栏定位不正确

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>

侧边栏定位不正确

Sidebar isn't positioning correctly

html

css

layout

alignment