左寄せのコンテンツでdivを集中管理する

Question

これは簡単な答えですが、わかりません。私は、次のレイアウトを思い付くしようとしている：

赤いボックスが動的にコンテンツに合わせて成長しなければならない、とページを中心とする必要があるdiv要素です。それは水平に収まる黄色のdivの数だけの幅でなければなりません。黄色のボックスは左揃えにしなければならないdivです。これまでは、コンテナdivをtext-align：centerに設定したインラインブロックと、インラインブロックを表示するように設定した黄色のdivを表示するようにしました。黄色のdivは正しく表示され、ブラウザのサイズが変更されるとフローされますが、赤いdivは常にブラウザの幅の100％になるため、グリッドはページ上に集中しません。

はここに私のCSSです：

<style> 

    .bar { 
     height:50px; 
     font-weight:300; 
     text-align:right; 
    } 

    .bluebackground { 
     background-color:#00A9A3; 
    } 

    .barcontent { 
     margin-right:10px; 
     color:white; 
    } 

    .verticalalign { 
     display:inline-block; 
     vertical-align:middle; 
    } 

    .DivHelper { 
     display: inline-block; 
     vertical-align: middle; 
     height:100%; 
    } 

    .normalfont { 
     font-family: 'Open Sans Light', sans-serif; 
    } 

    .bigtext { 
     font-size:20px; 
    } 

    .medium { 
     font-size:15px; 
    } 

    .blockp { 
     display:inline-block; 
    } 

    .darktext { 
     color:#333; 
    } 

    body { 
     height:100%; 
     margin:0; 
     padding:0; 
     background-color:#F6F6F6; 
    } 

    html, body, #body2 { 
     height: 100%; 
     min-height: 100%; 
    } 

    table td:last-child { 
     width: 100%; 
    } 

    .menulinkcontainer { 
     display:inline-block; 
     vertical-align:top; 
     padding:20px; 
     margin-bottom:20px; 
     background-color:green; 
    } 

    .menulinkbackdrop { 
     display:inline-block; 
     min-width:250px; 
     width:250px; 
     height:200px; 
     min-height:200px; 
     cursor:pointer; 
    } 

    .menulinkshader { 
     position:relative; 
     top:-200px; 
     left:0px; 
     width:100%; 
     min-width:100% 
     height:100%; 
     min-height:100%; 
     background-color:rgba(0,0,0,0.0); 
    } 

    .menulinktext { 
     display:inline-block; 
     min-width:250px; 
     max-width:250px; 
     width:250px; 

    } 

    .menucontainer { 
     padding:20px; 
     background-color:red; 
     display:inline-block; 
     clear:both; 
     float:left; 
    } 

</style> 

そしてHTML：

<div class='menucontainer'> 
     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#777' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#777' align='center'> 
       REVIEWS 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Reviews link. 
      </div> 
     </div> 

     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#f33' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#f33' align='center'> 
       COMING SOON 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Coming soon link. 
      </div> 
     </div> 

     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#3f3' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'> 
       DEALS 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Deals link. 
      </div> 
     </div> 

     <div class='menulinkcontainer'> 
      <div class='menulinkbackdrop' style='background-color:#3f3' align='center'> 
       <img src='img/reviews.png' class='verticalalign'><div class='DivHelper'></div> 
       <div class='menulinkshader' onMouseOver='this.style.backgroundColor="rgba(0,0,0,0.25)"' onMouseOut='this.style.backgroundColor="rgba(0,0,0,0.0)"'></div> 
      </div><br> 
      <div class='menulinktext normalfont bigtext' style='color:#3f3' align='center'> 
       AWARDS 
      </div><br> 
      <div class='menulinktext normalfont mediumtext' style='margin-top:10px' align='left'> 
       Awards link. 
      </div> 
     </div> 

    </div> 

Answer 1

あなたは、ビューポートのサイズが変更されたとして柔軟要素を合わせるとラップするフレキシボックスを必要と私は願って、これはあなたのアイデアを提供しますその実装。

.things { 
 
    padding: 0; 
 
    margin: 0; 
 
    flex-flow:row wrap; /*Wraps down in row fashion*/ 
 
    display: flex; /* Display property on parent container*/ 
 
    background:red; 
 
} 
 

 
.thing { 
 
    background:yellow; 
 
    border:1px solid black; 
 
    padding: 10px; 
 
    margin:5px; 
 
    flex:1 0 200px; /* 1 is for flex-grow, 0 for flex-shrink and the basis width is set to 200px */ 
 
    max-width:250px; 
 
    height:200px; 
 
    align-items:center; 
 
}

<div class="things"> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
    <div class="thing"></div> 
 
</div>