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

Question

我得到了一个为“奥运拳击锦标赛”制作网站的任务，该网站需要包含一个右侧边栏。我尝试了将近一天，但我似乎无法找到让它出现在主要内容部分旁边的方法。

这里是我的代码：

<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

这里左手边更多的空间是一个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是为了确保它正确地包围浮动元素。这通常应用为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; 
 
}