フレックス：Divsがお互いに横になるのではなく、

Question

私は基本的なポートフォリオのWebページを作成しています。私はサイドバーと英雄のイメージをうまく作りました。ヒーローイメージの下にあるはずの2つのdivが、その右側に表示されます。

HTML

<div id="wrap"> 

     <div id="side-bar-left"> 

      <div id="contents-left"> 

       <div id="overlay"> 

        <p id="logo">CS</p> 

        <hr class="mini-underline"> 

        <div id="links-container"> 

         <a class="link" href="#">Welcome</a><br> 
         <a class="link" href="#">Project One</a><br> 
         <a class="link" href="#">Project Two</a><br> 
         <a class="link" href="#">Project Three</a><br> 
         <a class="link" href="#">Contact</a><br> 

        </div> 

        <img id="setting-icon" src="img/settings.png" onclick="openSettings()"> 

        <div id="settings-container"> 

         <img src="img/arrow.png" id="arrow-icon" onclick="closeSettings()"> 

         <p id="ss-button" onclick="removeSS()">Smooth Scroll</p> 
         <p id="hs-button" onclick="hideSB()">Hide Sidebar</p> 

        </div> 

       </div> 

      </div> 

     </div> 

      <div id="hero"> 

       <div id="hero-overlay"> 

       </div> 

      </div> 

     <div id="picture-box"> 

      <div id="picture-container"> 

       <div id="picture-overlay"> 

       </div> 

      </div> 

     </div> 

     <div id="project-one-container"> 

     </div> 

    </div> 

CSS使用すると、1つ以上のツリーを配置する必要があり

#wrap { 
    width: 100%; 
    height: auto; 

    display: -ms-flexbox; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-box; 
    display: box; 

    -ms-flex-direction: row; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -ms-box-orient: horizontal; 
    box-orient: horizontal; 
} 

/* ####################### Sidebar stuff ####################### */ 

    #side-bar-left { 
     width: 150px; 
     background-color: white; 
     -ms-flex: 0 150px; 
     -webkit-box-flex: 0; 
     -moz-box-flex: 0; 
     -ms-box-flex: 0; 
     box-flex: 0; 
    } 

     #contents-left { 
      position: fixed; 
      top: 0; 
      left: 0; 

      height: 100vh; 
      width: 150px; 
      background-color: white; 

      overflow: hidden; 

      display: -webkit-flex; 
      display: flex; 
      -webkit-flex-direction: column; 
      flex-direction: column; 
     } 

      #overlay { 
       width: 150px; 
       height: 0px; 

       background-color: rgba(56, 56, 56, 0.7); 
      } 

/* ####################### Content area ####################### */ 

/* ####################### Hero image ####################### */ 

    #hero { 
     width: 100%; 
     height: 50vh; 
     display: flex; 
     justify-content: center; /* align horizontal */ 
     align-items: center; 

      background-image: url("img/swirl_pattern.png"); 
      background-attachment: fixed; 
    } /* rgb(27, 188, 155);*/ 

     #hero-overlay { 
      width: 100%; 
      height: 50vh; 

      background-color: rgba(27, 188, 155, 0.8); 
      display: flex; 
      justify-content: center; /* align horizontal */ 
      align-items: center; 
     } 

    #picture-box { 
     height: 25vh; 
     width: 100%; 

     background-color: #ecedec; 
     float: left; 
    } 

     #about-container { 
      width: 600px; 
      height: 400px; 

      background-color: black; 
      margin-right: auto; 
      margin-left: auto; 
     } 

      #picture-container { 
       height: 250px; 
       width: 250px; 

       border-radius: 50%; 
       background-color: white; 
      } 

       #picture-overlay { 
        No styling as of yet 
       } 

/* ####################### Project one page ####################### */ 

    #project-one-container { 
     width: 100%; 
     height: 150vh; 

     background-color: red; 
    } 

What it's supposed to look like

What it looks like now (wrong)

Answer 1

この場合、divが今、あなただけの余裕を見ていると、あなたはそれが一つの側にある必要はあり

 
    body{ 
 
    margin:0px; 
 
    } 
 

 
    #wrap { 
 
    width: 100%; 
 
    height: auto; 
 
    display: flex; 
 

 
    /*display: -ms-flexbox; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-box; 
 
    display: box; 
 

 
    -ms-flex-direction: row; 
 
    -webkit-box-orient: horizontal; 
 
    -moz-box-orient: horizontal; 
 
    -ms-box-orient: horizontal; 
 
    box-orient: horizontal;*/ 
 
} 
 

 
/* ####################### Sidebar stuff ####################### */ 
 

 
    #side-bar-left { 
 
     width: 182px; 
 
     background-color: white; 
 
     -ms-flex: 0 150px; 
 
     -webkit-box-flex: 0; 
 
     -moz-box-flex: 0; 
 
     -ms-box-flex: 0; 
 
     box-flex: 0; 
 
    } 
 

 
     #contents-left { 
 
      position: fixed; 
 
      top: 0; 
 
      left: 0; 
 

 
      height: 100vh; 
 
      width: 150px; 
 
      background-color: white; 
 

 
      overflow: hidden; 
 

 
      display: -webkit-flex; 
 
      display: flex; 
 
      -webkit-flex-direction: column; 
 
      flex-direction: column; 
 
     } 
 

 
      #overlay { 
 
       width: 150px; 
 
       height: 0px; 
 

 
       background-color: rgba(56, 56, 56, 0.7); 
 
      } 
 

 
/* ####################### Content area ####################### */ 
 

 
/* ####################### Hero image ####################### */ 
 

 
    #hero { 
 
     width: 100%; 
 
     height: 50vh; 
 
     display: flex; 
 
     justify-content: center; /* align horizontal */ 
 
     align-items: center; 
 

 
      background-image: url("img/swirl_pattern.png"); 
 
      background-attachment: fixed; 
 
    } /* rgb(27, 188, 155);*/ 
 

 
     #hero-overlay { 
 
      width: 100%; 
 
      height: 50vh; 
 

 
      background-color: rgba(27, 188, 155, 0.8); 
 
      display: flex; 
 
      justify-content: center; /* align horizontal */ 
 
      align-items: center; 
 
     } 
 

 
    #picture-box { 
 
     height: 250px; 
 
     width: 100%; 
 

 
     background-color: #ecedec; 
 
     /*float: left;*/ 
 
    } 
 

 
     #about-container { 
 
      width: 600px; 
 
      height: 400px; 
 

 
      background-color: black; 
 
      margin-right: auto; 
 
      margin-left: auto; 
 
     } 
 

 
      #picture-container { 
 
       height: 250px; 
 
       width: 250px; 
 

 
       border-radius: 50%; 
 
       background-color: white; 
 
      } 
 

 
       #picture-overlay { 
 
        No styling as of yet 
 
       } 
 

 
/* ####################### Project one page ####################### */ 
 

 
    #project-one-container { 
 
     width: 100%; 
 
     height: 150vh; 
 

 
     background-color: red; 
 
    } 
 
    .test{ 
 
     width: 100%; 
 
    } 
 
    
 
    

<div id="wrap"> 
 

 
     <div id="side-bar-left"> 
 

 
      <div id="contents-left"> 
 

 
       <div id="overlay"> 
 

 
        <p id="logo">CS</p> 
 

 
        <hr class="mini-underline"> 
 

 
        <div id="links-container"> 
 

 
         <a class="link" href="#">Welcome</a><br> 
 
         <a class="link" href="#">Project One</a><br> 
 
         <a class="link" href="#">Project Two</a><br> 
 
         <a class="link" href="#">Project Three</a><br> 
 
         <a class="link" href="#">Contact</a><br> 
 

 
        </div> 
 

 
        <img id="setting-icon" src="img/settings.png" onclick="openSettings()"> 
 

 
        <div id="settings-container"> 
 

 
         <img src="img/arrow.png" id="arrow-icon" onclick="closeSettings()"> 
 

 
         <p id="ss-button" onclick="removeSS()">Smooth Scroll</p> 
 
         <p id="hs-button" onclick="hideSB()">Hide Sidebar</p> 
 

 
        </div> 
 

 
       </div> 
 

 
      </div> 
 

 
     </div> 
 
<div class="test"> 
 

 
      <div id="hero"> 
 

 
       <div id="hero-overlay"> 
 

 
       </div> 
 

 
      </div> 
 

 
     <div id="picture-box"> 
 

 
      <div id="picture-container"> 
 

 
       <div id="picture-overlay"> 
 

 
       </div> 
 

 
      </div> 
 

 
     </div> 
 

 
     <div id="project-one-container"> 
 

 
     </div> 
 
</div> 
 
    </div>