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

这是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 2

更改您的

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

要

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

这不仅会将侧边栏放置在您想要的位置，而且还可以放置元素，而不是侧向推动它，让您在.content-main的左侧留出更多空间

这是Fiddle

希望这有帮助！

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

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

3 个答案: