为什么我的侧边栏卡在页面中间？

Question

我的侧边栏似乎卡在页面上我的第二篇文章旁边，不会向上移动以浮动在主要内容旁边。有人可以看一下代码，看看他们是否能说出问题是什么？几个小时以来，我一直试图让它解开。我真的不知道为什么它不会放在内容旁边。这是您可以看到问题的图片：

body {
  background-image: url("billeder/bgorange.jpg");
  background-size: cover;
  color: black;
  /* Base font size (14px)? 7%*/
  font-family: sans-serif, arial;
  line-height: 1.5;
  text-align: left;
}

.body {
  width: 95%;
}

.maincontent {
  line-height: 20px;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.content {
  width: 75%;
  float: left;
}

.topcontent {
  background-color: white;
  border-radius: 5px;
  float: none;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 1% 0 1% 0;
  padding: 1% 3% 3% 3%
}

.bottomcontent {
  background-color: white;
  float: none;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 2% 0 2% 0;
  padding: 1% 5% 3% 3%
}


/* SIDEBAR!***************************************************************/

.top-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.middle-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.bottom-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

<header class="mainheader">

  <nav>
    <ul id="menu">
      <li><a href="index.html" class="active">Forside</a></li>
    </ul>
  </nav>

</header>

<div id="banner"></div>
<div class="maincontent">


  <div class="content">
    <article class="topcontent">
      <header>
        <h2><a href="#" title="first post">Artikel</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info om denne boks</p>
      </footer>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporvoluptua. At vero eo </p>
    </article>
  </div>

  <div class="content">
    <article class="bottomcontent">
      <header>
        <h2><a href="#" title="second post">Second post</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info </p>
      </footer>
      <p>takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </article>
  </div>
</div>

<aside class="top-sidebar">
  <article>
    <h2>top sidebar</h2>
    <p>ipsum dolor sit amet, com.</p>
  </article>
</aside>

<aside class="middle-sidebar">
  <article>
    <h2>Middle sidebar</h2>
    <p>ipsum dolor sit amet, conserebum.</p>
  </article>
</aside>

<aside class="bottom-sidebar">
  <article>
    <h2>Bottom sidebar</h2>
    <p>ipsum dolor sit amet, conrebum.</p>
  </article>
</aside>

<footer class="mainfooter"></footer>

Answer 1

您遇到的问题是花车的顺序。顺序为：

.content
.content
.top-sidebar

当您浮动元素时，如果行中的下一个元素不适合提供的 space，它将回流到下一行（在前一个元素下方）。

事情是这样的：

.content 是浏览器宽度的 75%。因为它是浮动的，所以如果有足够的空间，下一个元素将尝试紧挨着它。剩余空间为浏览器宽度的 25%。第二个 .content 是浏览器宽度的 75%，放不下，所以重排。下一个元素是 .top-sidebar，它占浏览器宽度的 24%（在添加边距和填充百分比之后），将适合剩余的 25%，因此侧边栏从那里开始。

我们如何解决它？

将您的属性从 .content 移动到 .maincontent。

body {
  background-image: url("billeder/bgorange.jpg");
  background-size: cover;
  color: black;
  /* Base font size (14px)? 7%*/
  font-family: sans-serif, arial;
  line-height: 1.5;
  text-align: left;
}

.body {
  width: 95%;
}

.maincontent {
  width: 75%;
  float: left;
  line-height: 20px;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.content {
}

.topcontent {
  background-color: white;
  border-radius: 5px;
  float: none;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 1% 0 1% 0;
  padding: 1% 3% 3% 3%
}

.bottomcontent {
  background-color: white;
  float: none;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
  margin: 2% 0 2% 0;
  padding: 1% 5% 3% 3%
}


/* SIDEBAR!***************************************************************/

.top-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.middle-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.bottom-sidebar {
  text-align: center;
  width: 20%;
  float: left;
  background-color: white;
  padding: 1% 1% 1% 1%;
  margin: 1% 0 0 1%;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

<header class="mainheader">

  <nav>
    <ul id="menu">
      <li><a href="index.html" class="active">Forside</a></li>
    </ul>
  </nav>

</header>

<div id="banner"></div>
<div class="maincontent">


  <div class="content">
    <article class="topcontent">
      <header>
        <h2><a href="#" title="first post">Artikel</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info om denne boks</p>
      </footer>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporvoluptua. At vero eo </p>
    </article>
  </div>

  <div class="content">
    <article class="bottomcontent">
      <header>
        <h2><a href="#" title="second post">Second post</a></h2>
      </header>
      <footer>
        <p class="post-info"> Info </p>
      </footer>
      <p>takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </article>
  </div>
</div>

<aside class="top-sidebar">
  <article>
    <h2>top sidebar</h2>
    <p>ipsum dolor sit amet, com.</p>
  </article>
</aside>

<aside class="middle-sidebar">
  <article>
    <h2>Middle sidebar</h2>
    <p>ipsum dolor sit amet, conserebum.</p>
  </article>
</aside>

<aside class="bottom-sidebar">
  <article>
    <h2>Bottom sidebar</h2>
    <p>ipsum dolor sit amet, conrebum.</p>
  </article>
</aside>

<footer class="mainfooter"></footer>

现在的顺序是：

.maincontent
.top-sidebar

这就是您想要的漂浮物，有两个高级容器，您可以在其中放置真实内容并使漂浮物最小化。

如果您今天开始构建网站，我最终会使用 flexbox。

基本示例：

body {
  margin: 0;
}

.content {
  display: flex;
}
.content section {
  margin: 15px;
  padding: 10px;
  background-color: rgba( 255, 255, 255, 0.8 );
  border-radius: 3px;
  overflow: hidden;
}

main {
  width: 75%;
  background-color: gold;
}

sidebar {
  width: 25%;
  background-color: rebeccapurple;
}

footer {
  padding: 10px;
  background-color: indianred;
}

<div class="content">

  <main>
    <section>
      <h2>Heading</h2>
      <p>
        Lorem ipsum dolor.
      </p>
    </section>
    <section>
      <h2>Heading</h2>
      <p>
        Lorem ipsum dolor.
      </p>
    </section>
  </main>
  
  <sidebar>
    <section>
      <h3>Heading</h3>
      <h2>Heading</h2>
      <p>
        Lorem ipsum dolor.
      </p>
    </section>
  </sidebar>
  
</div>

<footer>Site footer</footer>

为什么我的侧边栏卡在页面中间？

Why is my sidebar stuck in the middle of the page?

html

css

sidebar

responsive