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

Question

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

| btn1 | btn2|

|按钮3 | 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;
}