时间戳

首页 > 解决方案 > 为什么我的页脚和内容不在使用 flexbox 的侧边栏旁边？

html - 为什么我的页脚和内容不在使用 flexbox 的侧边栏旁边？

问题描述

我已经为此苦苦挣扎了将近一天。我似乎无法在侧边栏旁边制作内容和页脚。我一直在寻找解决方案，但找不到任何解决方案。请告诉我我哪里错了，如果可能的话我应该如何改进。

这是我的工作

https://codepen.io/NotJustinY/pen/wvgVqrZ

        .container1{
          flex-wrap: wrap;
          display: flex;
          text-align: center;
          font-family: 'original surfer', cursive;
        }

        .header1{
          background: rgb(255, 60, 0);
        }

        .sidebar1{
          background: rgb(255, 102, 0);
        }

        .main1{
          background: rgb(255, 230, 0);
        }

        .content1{
          background: rgb(115, 255, 0);
        }

        .content2{
          background: rgb(0, 255, 234);
        }

        .content3{
          background: rgb(0, 26, 255);
        }

        .footer1{
          background: rgb(255, 0, 255);
        }

        @media screen and (min-width: 720px) {
          .container1{flex-direction: row; justify-content: space-around;}
          .header1{order:1; flex: 100%;}
          .sidebar1{order:2; flex: 25%; height: 675px;}
          .main1{order:3; flex:75%; height: 300px;}
          .content1{order:4; flex: 1; height: 200px;}
          .content2{order:5; flex:1; height: 200px;}
          .content3{order:6; flex:1; height: 200px;}
          .footer1{order:7; flex:100%; height: 175px;}
        }

        @media screen and (max-width: 720px) {
          .container1{flex-direction: column; justify-content: space-around;}
          .header1{order:1;}
          .sidebar1{order:2;}
          .main1{order:3; height: 300px;}
          .content1{order:4; height: 200px;}
          .content2{order:5; height: 200px;}
          .content3{order:6; height: 200px;}
          .footer1{order:7; height: 175px;}
        }
<html>
  <head>
    <title>Exercise</title>
</head>
<body>
  <div class="container1">
    <header class="header1">NAVBAR</header>

    <aside class="sidebar1">SIDEBAR</aside>
    <article class="main1">MAIN</article>
    
    <article class="content1">CONTENT 1</article>
    <article class="content2">CONTENT 2</article>
    <article class="content3">CONTENT 3</article>

    <footer class="footer1">FOOTER</footer>
  </div>

</body>
</html>

这就是它应该如何完成的

标签： htmlcssflexbox

解决方案

您需要添加一个主 div，其中包含主要、内容和页脚区域。像这样：

<section class="main-container">
      <article class="main1">MAIN</article>
    
      <div class="content-wrap">
        <article class="content1">CONTENT 1</article>
        <article class="content2">CONTENT 2</article>
        <article class="content3">CONTENT 3</article>
      </div>    

      <footer class="footer1">FOOTER</footer>
</section>


.container1{
  flex-wrap: wrap;
  display: flex;
  text-align: center;
  font-family: 'original surfer', cursive;
}

.header1{
  background: rgb(255, 60, 0);
}

.sidebar1{
  background: rgb(255, 102, 0);
}

.main1{
  background: rgb(255, 230, 0);
}

.content1{
  background: rgb(115, 255, 0);
}

.content2{
  background: rgb(0, 255, 234);
}

.content3{
  background: rgb(0, 26, 255);
}

.footer1{
  background: rgb(255, 0, 255);
}

@media screen and (min-width: 720px) {
  .container1{flex-direction: row; justify-content: space-around;}
  .header1{order:1; flex: 100%;}
  .sidebar1{order:2; flex: 25%; height: 675px;}
  .main-container{order:3; flex:75%;} 
  .main1 { height: 300px;}
  .content-wrap {display:flex;order:4;}
  .content1{order:4; flex: 1; height: 200px;}
  .content2{order:5; flex:1; height: 200px;}
  .content3{order:6; flex:1; height: 200px;}
  .footer1{order:7; flex:100%; height: 175px;}
}

@media screen and (max-width: 720px) {
  .container1{flex-direction: column; justify-content: space-around;}
  .header1{order:1;}
  .sidebar1{order:2;}
  .main-container{order:3;} 
  .main1{order:3; height: 300px;}
  .content1{order:4; height: 200px;}
  .content2{order:5; height: 200px;}
  .content3{order:6; height: 200px;}
  .footer1{order:7; height: 175px;}
}
<html>
  <head>
    <title>Exercise</title>
</head>
<body>

  <div class="container1">
    <header class="header1">NAVBAR</header>

    <aside class="sidebar1">SIDEBAR</aside>
    <section class="main-container">
      <article class="main1">MAIN</article>
    
      <div class="content-wrap">
        <article class="content1">CONTENT 1</article>
        <article class="content2">CONTENT 2</article>
        <article class="content3">CONTENT 3</article>
      </div>    

        <footer class="footer1">FOOTER</footer>
    </section>
  </div>

</body>
</html>

工作示例

推荐阅读