100％幅のコンテナに50％幅と同じ高さで均等に4つのdivを含めるにはどうすればよいですか？

Question

したがって、私は異なるステイプを示す4つのボックスを作ろうとしています。私はそれが以下のように見えるが、その幅の50％を望む。 HTML /ボディ幅を100％として定義しても、幅を50％に設定しても機能しません。

.steps{ 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height: auto; 
 
    align-content: center; 
 
} 
 

 
.topsteps{ 
 
    vertical-align: middle; 
 
    display: inline-flex; 
 
    margin: auto; 
 
    align-content: center; 
 
} 
 

 
.bottomsteps{ 
 
    vertical-align: middle; 
 
    display: inline-flex; 
 
    margin: auto; 
 
    align-content: center; 
 
} 
 

 
#right{ 
 
    display: block; 
 
    width: 150px; 
 
    float: right; 
 
} 
 

 
#left { 
 
    display: block; 
 
    width: 150px; 
 
    float: left; 
 
} 
 

 
.boxstep-red{ 
 
    border: 2px solid #a9a9a9; 
 
    background-color: #ff383f; 
 
    padding: 50px; 
 
} 
 

 
.boxstep-blue{ 
 
    border: 2px solid #a9a9a9; 
 
    background-color: #caebf2; 
 
    padding: 50px; 
 
}

<div class="steps"> 
 
     <div class="topsteps"> 
 
       <div class="boxstep-red" id="left"> 
 
       <p>plan</p>    
 
       </div> 
 
       <div class="boxstep-blue" id="right"> 
 
       <p>organize</p> 
 
       </div> 
 
      </div><br> 
 
      <div class="bottomsteps"> 
 
       <div class="boxstep-blue" id="right"> 
 
       <p>DO</p> 
 
       </div> 
 
       <div class="boxstep-red" id="left"> 
 
       <p>ace</p> 
 
       </div> 
 
      </div> 
 
     </div>

私だけではなく中央にちょうどエリアのWebページの合計を占めるように、それは50％の幅にする方法を把握する必要があります。 #rightと#leftではwidth：150pxの代わりにwidth：50％に設定しても動作しないので、元のフォーマットを保持したままで、ボックスの幅を50％にするために何を追加/調整できますか？ 4つのボックスが中央で結合されていますか？

Answer 1

以下のスニペットが機能していることを確認できます。 width:100%〜topstepsbottomstepsとし、rightleftのピクセル幅を削除し、50%を追加すると、これは各ボックスの上下50％の幅でフルスクリーンになります。これがあなたを助けることを願っています。

.steps{ 
 
    width: 100%; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    height: auto; 
 
    align-content: center; 
 
} 
 

 
.topsteps{ 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    display: inline-flex; 
 
    margin: auto; 
 
    align-content: center; 
 
} 
 

 
.bottomsteps{ 
 
    width: 100%; 
 
    vertical-align: middle; 
 
    display: inline-flex; 
 
    margin: auto; 
 
    align-content: center; 
 
} 
 

 
#right{ 
 
    display: block; 
 
    float: right; 
 
    width: 50%; 
 
} 
 

 
#left { 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.boxstep-red{ 
 
    border: 2px solid #a9a9a9; 
 
    background-color: #ff383f; 
 
    padding: 50px; 
 
} 
 

 
.boxstep-blue{ 
 
    border: 2px solid #a9a9a9; 
 
    background-color: #caebf2; 
 
    padding: 50px; 
 
}

<div class="steps"> 
 
     <div class="topsteps"> 
 
       <div class="boxstep-red" id="left"> 
 
       <p>plan</p>    
 
       </div> 
 
       <div class="boxstep-blue" id="right"> 
 
       <p>organize</p> 
 
       </div> 
 
      </div><br> 
 
      <div class="bottomsteps"> 
 
       <div class="boxstep-blue" id="right"> 
 
       <p>DO</p> 
 
       </div> 
 
       <div class="boxstep-red" id="left"> 
 
       <p>ace</p> 
 
       </div> 
 
      </div> 
 
     </div>