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

时间：2018-01-03 22:27:28

标签： html css responsive sidebar

我的侧边栏似乎卡在我页面上的第二篇文章旁边，并且不会向上移动到主要内容旁边。有人可以看看代码，看看他们是否可以告诉问题是什么？我一直试图让它在数小时内脱落。我真的不知道为什么它不会坐在内容旁边。这是一个可以看到问题的图像：

enter image description here 

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>

1 个答案:

答案 0 :(得分：2)

你遇到的问题是浮动的顺序。订单如下：

  1. .content
  2. .content
  3. .top-sidebar

    4. 当你浮动元素时，如果行中的下一个元素不适合所提供的空间，它将回流到下一行（在前一个元素下面）。

    这就是发生的事情：

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

    现在订单是：

    1. .maincontent
    2. .top-sidebar

      3. 这就是你想要的花车，你有两个高级容器，你可以放置真实的内容，并模仿花车。

      如果你今天开始建立一个网站，我最终会使用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>

相关问题
最新问题