侧边栏位置不正确

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>

这篇文章是用德语写的，应该没什么区别。还有"；。侧边栏"；是侧边栏并且它应该位于"的右侧；。内容"；。

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>