在移动页面中将按钮放置在正方形中

Question

我正在开发一个移动网页。我需要以方形方式放置四个按钮：

| btn1 | BTN2 |

| btn3 | btn4 |

这些按钮中的每一个都必须放在它自己的div中，如下所示：

<div class="buttonContainer">
    <div class="btn1">
       <!-- button -->
    </div>
    <div class="btn2">
       <!-- button -->
    </div>
    <div class="btn3">
       <!-- button -->
    </div>
    <div class="btn4">
       <!-- button -->
    </div>
</div>

如何使用CSS实现这一目标？

Answer 1

使用您当前的HTML我建议使用以下内容：

https://jsfiddle.net/8qurquLe/

每个按钮需要50％并向左浮动。确保容器设置为100％。

.buttonContainer {
    width:100%;
}
.buttonContainer div {
    width:50%;
    float:left;
}

Answer 2

尝试使用flex，如下所示：

div.buttonContainer {
  display: flex;
  flex-flow: wrap row;
} 
div.buttonContainer div {  
  flex:1 0 auto;
  
  border: 1px solid green;
  height: 50px;
  width:40%;
}

<div class="buttonContainer">
<div class="btn1">
   <!-- button -->
</div>
<div class="btn2">
   <!-- button -->
</div>
<div class="btn3">
   <!-- button -->
</div>
<div class="btn4">
   <!-- button -->
</div>
</div>