1
上部に4つのボタンがあり、側面に3つのボタン（12）があるように12のボタンを配置する必要があります。 4x3 さらに左上の2つのボタン（Div/Mult）と右（Add/Sub）4つのコンテナをCSSで並べるにはどうすればいいですか？
HTML文書とCSS文書が含まれますが、JS文書が必要な場合はお気軽にお問い合わせください。 これは私が見たいと思う方法です、そして、私はどのようにわかりません。
本部/ MultBtn追加/ SubBtn
1 2 3 4（他方の側のすべての方法）結果の
<!DOCTYPE html>
<html>
<head>
<title>Math Fact Tune Up</title>
<style>
#buttonContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
}
button {
display: block;
margin: 0 auto;
background-color: #262b2b;
border-style: solid;
color: white;
font-family: Open Sans, sans-serif;
border-radius: 5px;
}
.lvlButton {
padding-bottom: .1em;
padding-top: .1em;
}
body,
html {
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color: #262b2b;
}
body {
overflow: hidden;
}
#go {
background-color: #00d10d
}
</style>
</head>
<body>
<div id="buttonContainer">
<div class="lvlButton" id="divMult">
<button id="divMultBtn">
Multiplication/Division
</button>
</div>
<br>
<div class="lvlButton" id="addSub">
<button id="addSubBtn">
Addition/Subtraction
</button>
</div>
<br>
<div class="lvlButton" id="lvl1">
<button id="lvl1Btn">
Level 1
</button>
</div>
<br>
<div class="lvlButton" id="lvl2">
<button id="lvl2Btn">
Level 2
</button>
</div>
<br>
<div class="lvlButton" id="lvl3">
<button id="lvl3Btn">
Level 3
</button>
</div>
<br>
<div class="lvlButton" id="lvl4">
<button id="lvl4Btn">
Level 4
</button>
</div>
<br>
<div class="lvlButton" id="lvl5">
<button id="lvl5Btn">
Level 5
</button>
</div>
<br>
<div class="lvlButton" id="lvl6">
<button id="lvl6Btn">
Level 6
</button>
</div>
<br>
<div class="lvlButton" id="lvl7">
<button id="lvl7Btn">
Level 7
</button>
</div>
<br>
<div class="lvlButton" id="lvl8">
<button id="lvl8Btn">
Level 8
</button>
</div>
<br>
<div class="lvlButton" id="lvl9">
<button id="lvl9Btn">
Level 9
</button>
</div>
<br>
<div class="lvlButton" id="lvl10">
<button id="lvl10Btn">
Level 10
</button>
</div>
<br>
<div class="lvlButton" id="lvl11">
<button id="lvl11Btn">
Level 11
</button>
</div>
<br>
<div class="lvlButton" id="lvl12">
<button id="lvl12Btn">
Level 12
</button>
</div>
<div class="lvlButton" id="gocontainer">
<button id="go">
GO
</button>
</div>
</div>
</body>
</html>ピクチャー
_「と3の側面に」_あなたは「両側に」とはどういう意味ですか？ – guest271314
@ guest271314私は垂直に行くことを意味します。私はそれを描こうとしましたが、それは私のスペースを削除しました。混乱のために申し訳ありません –
あなたはコンテナの内部に絶対的な位置付けを試みましたか？ – Bindrid