Html 我需要在我的内容右侧添加一个侧边栏

我接到一个任务，为“奥林匹克拳击锦标赛”制作一个网站，其中需要包括一个右侧边栏。我尝试了将近一天，但我似乎找不到一种方法让它出现在主要内容部分的旁边

这是我的密码：

<div class="wrapper">
<div class="content-main content-style">
 <h1>Hier komt de content van de main sectie.</h1>
 <p>Mooie content </p>
</div>

<div class="content-right content-style">
 <h1>Hier komt de content van de right-sidebar</h1>
 <p>mooie content he?</p>
</div>

我认为这应该是一件很容易的事情；我就是想不出来。

改变你的想法

.content-main {
    width: 50%;
    margin-left: 450px;
}

到

这样不仅可以将侧边栏放置在您想要的位置，还可以定位元素，而不是将其侧向推，从而在

.content main

这里有一个

希望这有帮助

这是一个例子

请注意，浮动元素应该放在第一位。这是要点

<div class="wrapper">

<div class="content-right content-style">
 <h1>Hier komt de content van de right-sidebar</h1>
 <p>mooie content he?</p>
</div>

<div class="content-main content-style">
 <h1>Hier komt de content van de main sectie.</h1>
 <p>Mooie content </p>
</div>

</div>

.content-style {
    background-color:rgba(120, 135, 171,0.5);
    text-align:center;
}
 .content-main {
    width: 80%;
}

.content-right{
   width: 15%;
   float:right;
   position: relative;
}

右边栏的内容
他满意吗

主要部门的内容。
穆伊内容

.内容风格{
背景色：rgba（120135171,0.5）；
文本对齐：居中；
}
.主要内容{
宽度：80%；
}
.内容权{
宽度：15%；
浮动：对；
位置：相对位置；
}

在不更改标记的情况下，这就是您需要的CSS。包装器上的CSS是为了确保它正确地包围浮动的元素。这通常作为一个名为

clearfix

的类应用，您将经常使用它

.wrapper:before，
.包装工：之后{
内容：“；
显示：表格；
}
.包装工：之后{
明确：两者皆有；
}
.内容风格{
背景色：rgba（120135171,0.5）；
文本对齐：居中；
}
.主要内容{
浮动：左；
宽度：84%；
}
.内容权{
宽度：15%；
浮动：对；
位置：相对位置；
}

您的解决方案中似乎存在一些错误，两个div相互重叠。这与您从@MartinGodzina查看的窗口大小有关，只需将屏幕放大，并使用正确的CSS设置即可。div重叠永远不会发生。检查安东的答案（请=）

.content-main {
    width: 50%;
    position:absolute;
    left: 450px;
}

<div class="wrapper">

<div class="content-right content-style">
 <h1>Hier komt de content van de right-sidebar</h1>
 <p>mooie content he?</p>
</div>

<div class="content-main content-style">
 <h1>Hier komt de content van de main sectie.</h1>
 <p>Mooie content </p>
</div>

</div>

.content-style {
    background-color:rgba(120, 135, 171,0.5);
    text-align:center;
}
 .content-main {
    width: 80%;
}

.content-right{
   width: 15%;
   float:right;
   position: relative;
}