Question

经过多次实验和拔毛之后，我还没有找到一种方法让flexbox工作，所以我的侧边栏就在我的主要内容旁边。不仅仅是因为某些原因，在添加了flexbox之后，我的第二个主要帖子＆＃34;在小屏幕上突然变得透明。我不知道那里发生了什么......

我跪在这里 - 拜托，有人瞥了一眼我的代码然后告诉我，我做错了什么，这些柔性盒子在嘲笑我。

我将网站放在jsfiddle，codepen上并将其包含在这里以供您查看，CSS最初是移动设备，底部有更大的屏幕，这部分我需要帮助 - 侧边栏在下方移动设备上的内容，所以我不介意它不在那里的主要内容旁边： https://jsfiddle.net/Gingerx/9a7xhxqg/

https://codepen.io/Pinchofginger/pen/aELgXJ?editors=1100

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="body">

  <div class="wrapper">
  <div class="maincontent">

 <article class="topcontent">

<header>
<h1>Velkommen til vores hjemmeside</h1>
</header>

<footer>
   <p class="post-info">  hjem for herreløse hunde </p>
</footer>
                <img class="mellemh" src="http://i1246.photobucket.com/albums/gg611/Rcoslive/tumblr_opglesDkzP1rfn5l1o1_540_zpsk1t1dhzo.jpg" alt="Kdog"/>

<!-- 1 --------------------------------------------------------------------------->
  <div class=brødtekst>
          <p> Vi har stadig brug for din hjælp for at kunne sikre Kattelaugets eksistent, og modtager donationer, store som små. Donationer kan trækkes fra i skat, og er med til at sikre at vi kan give vores killinger og katte mad, varme og et sted at være, indtil de bliver adopteret.
          </p></div><!-- End, brødtekst -->
       </article>

   <article class="bottomcontent">
        <!-- 2 -->
        <header>
          <h1>Lidt om os</h1>
        </header>
        <footer>
          <p class="post-info"> Sådan drives kattehjemmet</p>
        </footer>
        <!-- INDSÆT TEKST HER 2 --------------------------------------------------------------------------->
        <div class=brødtekst>
<p>Alt dette kan naturligvis ikke lade sig gøre uden lokalbefolkningens hjælp. Nu sidder du helt sikkert og klapper i hænderne over hvor fantastiks det er at vi redder så mange katte, og overvejer hvordan DU kan hjælpe til med at støtte vores dejlige kattehjem, men bare rolig, det kan vi nemt svare på:</div><!-- End, brødtekst 2 -->
<ul>
<li><a href="adopt.html">Køb din kat hos os.</a></li>
<li><a href="donation.html">Tilbyd at tage en rengørings/fodervagt</a>, tider varierer fra en gang om ugen, til hver 14. dag.</li>
<li>Bliv medlem, det koster kun 200 kr. årligt.</li>
<li>Giv et bidrag til driften af kattehjemmet <a href="donation.html">her</a>. Alle beløb modtages med stor glæde</li>
</ul> </p>
      </article>
</div> <!-- End, maincontent-->

<div class="sidemenu">

  <aside class="top-sidebar">
<article>
  <h3> <a href="#">Plejefamilier og frivillige søges</a></h3>
</article>
 </aside>

<aside class="middle-sidebar">
 <article>
<h3>Ugens kat</h3> <img src="" alt="Kdog">
    <p><a href="#">Mathilde</a></p>
</article></aside>

<aside class="middle-sidebar">
  <article>
  <img src="billeder/ungkat/sailor.jpg" alt="Sailor" >
   <p> <a href="#">Sailor</a> </p>
</article>
</aside>

<aside class="bottom-sidebar">
    <article>
<h3>Ugens killng</h3>
    <img src="billeder/killinger/mr.grey.jpg" alt="Mr.Grey" >
     <p><a href="#">Mr.Grey</p></a>
     <p>en herlig lille gut med fuld fart på!</p>
    </article>
</aside>

</div> <!-- End, Sidemenu -->
</div> <!-- End, wrapper-->
</body>

然后是CSS / ******************* ***************** /

/*                            RESET                               */

/*                        ______________                          */

/*meyerweb.com/eric/tools/css/reset/               v2.0 | 20110126*/

/*License: none (public domain)                                   */

/******************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
    line-height: 1.2em;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/*           GEN                    */

/* Box-sizing = width or height + padding + border = reelle højde og bredde. */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*         Billeder! Img!    ******      Video!            */

.mellemh {
  float: left;
  padding: 10px 10px 0 2px;;
  width: 10%;}

.sidemenu img { width: 40%; float: left; margin-right: 5px; }

/*          Tekst!          */

.sidemenu .b {font-weight: bold; color: orange;}
.content h1, h2, h3 {
  margin: 0 0 2% 0;
  }

.sidebar h1, h2, h3 {margin: 0 0 2% 0;}

  h1 {font-size: 1.5em; color: orange;}
  h2 {font-size: 1.3em;color: orange;}
  h3 {font-size: 1.1em;color: orange;}

  .brødtekst 
  {white-space: pre-line;}


/*    SIDEBAR!                         */

.sidemenu { display: flex;
    flex-direction: column;
  flex-shrink: 0;}

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

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

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

.sidemenu p {color: grey;}


/*     MAIN!   **** BODY!  */
.wrapper {display: flex;
flex-direction: column;}

body {
  background-color: grey;
  background-size: cover;
  color: black;
  font-family: sans-serif, arial;
  text-align: left;
}

.body {
  margin: 0 auto;
  /* Alt er centreret*/
  width: 99%;
  clear: both;
}

.maincontent {
  display: flex; 
  flex-direction:column;
  flex-shrink: 0;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */    }

.wrapper {display: flex;
justify-content: space-between;}

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



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

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


/*  BIG SCREENS START HERE*******************/
@media only screen and (min-width: 40.5em) {

/* IMG!  ******   VIDEO! ***/

.sidemenu img { float: none; width: 70%; margin: 2 auto; }
.top-sidebar img {width: 70%;}

  .mellemh {
  padding: 10px 20px 0 2px;
  width: 35%;}


/* MAIN! BODY! *********************************************************/
  .wrapper {display: flex;
justify-content: space-evenly;}

.body { width: 90%;}

.maincontent {
   width: 71%;
   display: flex; 
  flex-direction: column;
  flex-shrink: 0;
  line-height: 20px;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */
}

.topcontent {
  background-color: white;
  height: auto;
  border-radius: 5px;
  /* pæne runde hjørner*/
  -moz-border-radius: 5px;
  /* Fox*/
  -webkit-border-radius: 5px;
  /* IE */

  padding: 1% 3% 1%% 3%
}

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


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

  .sidemenu { display: flex;
    flex-direction: column;
  flex-shrink: 0;}

.top-sidebar {
          text-align: center;
          width: 18%;
          background-color: white;
          padding: 1% 1% 1% 1%;
          margin: 1% 0 0 1%;
            }

        .middle-sidebar {
          text-align: center;
              width: 18%;
          background-color: white;
          padding: 1% 1% 1% 1%;
          margin: 1% 0 0 1%;
          border-radius: 5px;
          }

        .bottom-sidebar {
          text-align: center;
          width: 18%;
         background-color: white;
          padding: 1% 1% 1% 1%;
          margin: 1% 0 1% 1%;
                }

Answer 1

这一行CSS使您的主要内容和侧边栏显示在一列而不是一行：

.wrapper {
    display: flex;
    flex-direction: column;
}

你想要的是flex-direction: row这是flexboxes的默认设置，所以你需要做的就是删除一行。

.wrapper {
    display: flex;
}

如何使我的flexbox与我的布局一起工作，我的侧边栏仍然卡在底部

1 个答案: