如何将宽度为50％且高度相同的四个div平均包含在100％宽度的容器中？

Question

所以，我试图制作四个显示不同类型的盒子。我希望它看起来像下面但宽度的50％。我已将宽度设置为50％，即使我将HTML /正文宽度定义为100％，它也无法正常工作。

.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>

我只需找出一种方法使其宽度达到50％，这样它就占据了网页的总数，而不仅仅是中心区域。因为当我将它设置为宽度：50％而不是宽度：150px用于#right和#left并且它不起作用时，我可以添加/调整以使框的宽度为50％同时仍保留原始格式（ 4个盒子在中间连在一起）？

Answer 1

您可以查看以下代码片段是否有效。您需要将width:100%提供给topsteps bottomsteps，然后移除right left像素的宽度并添加50%这将全屏显示每个盒子顶部和底部的宽度为50％。希望这会对你有所帮助。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;