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

Question

我接到一项任务，要为 "Olympic boxing tournament" 制作一个网站，该网站需要包含右侧边栏。我试了快一天了，但我似乎找不到办法让它出现在主要内容部分旁边。

这是我的代码：

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

这里是 CSS :

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

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

我觉得应该是一件很容易的事情；我就是想不通。

Answer 1

改变你的

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

到

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

这不仅可以将侧边栏放置在您想要的位置，还可以定位元素，而不是将其推到一边，从而在 .content-main[=14 的左侧留出更多空间=]

这是一个Fiddle

希望对您有所帮助！

Answer 2

这里是working fiddle.

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

<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;
}

Answer 3

无需更改您的标记，这就是您需要的 CSS。包装器上的 CSS 是为了确保它正确地包围浮动元素。这通常作为 class 应用，称为 clearfix，因为您会经常使用它。

.wrapper:before,
.wrapper:after {
  content: " ";
  display: table;
}

.wrapper:after {
  clear: both;
}

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

.content-main {
  float: left;
  width: 84%;
}

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

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

I need to add a sidebar to the right of my content

html

css

styling