浮动配置的HTML布局-居中对齐

Question

我在HTML中有一个浮动布局，我想把方框放在开头、结尾和在中间。

这是我的片段：

html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 80%;
width: 80%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
position: relative;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
}
.tray-top .button,
.tray-bottom .button {
max-width: 33%;
}
.tray-left .button,
.tray-right .button {
max-height: 33%;
}
.tray-top .button.begin,
.tray-bottom .button.begin {
float: left;
}
.tray-top .button.middle,
.tray-bottom .button.middle {
float: left;
}
.tray-top .button.end,
.tray-bottom .button.end {
float: right;
}
.button.middle {
}
.tray-left .button.end,
.tray-right .button.end {
position: absolute;
bottom: 0px;
}

<div id="root">
<div class="tray tray-top">
		<div class="button begin">1</div>
		<div class="button middle">2</div>
		<div class="button end">3</div>
	</div>
<div class="tray tray-left">
		<div class="button begin">4</div>
		<div class="button middle">5</div>
		<div class="button end">6</div>
	</div>
<div class="tray tray-right">
		<div class="button begin">7</div>
		<div class="button middle">8</div>
		<div class="button end">9</div>
	</div>
<div class="tray tray-bottom">
		<div class="button begin">10</div>
		<div class="button middle">11</div>
		<div class="button end">12</div>
	</div>
</div>

我该如何制作(请在完整页面中查看(：

• Box2和Box11进入中间(同时将box3和box12保持在最后(
• Box5和Box8垂直进入中间
• Box6和Box9垂直到底

我不想坚持这种布局，但我想对所有浏览器(也包括IE11(保持最广泛的支持。

请注意，#root有80%的宽度和高度。它只表示#root的大小！=身体的大小(所以绝对定位和left: 50%不是一条路(。

Answer 1

我会为此添加一些flexbox。只有浮动很难做到这一点，使用定位可能也不好：

html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 85%;
width: 85%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height: 48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
display:inline-block;
}
.begin {
float:left;
}
.end {
float:right;
}

<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>

Answer 2

这解决了我的问题，但我不确定这是否是解决这个问题的最复杂的解决方案：

html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 80%;
width: 80%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
position: relative;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
position: relative;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
}
.tray-top .button,
.tray-bottom .button {
max-width: 33%;
}
.tray-left .button,
.tray-right .button {
max-height: 33%;
}
.tray-top .button.begin,
.tray-bottom .button.begin {
float: left;
}
.tray-top .button.middle,
.tray-bottom .button.middle {
float: left;
}
.tray-top .button.end,
.tray-bottom .button.end {
float: right;
}
.button.middle {
float: left;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.tray-left .button.end,
.tray-right .button.end {
position: absolute;
bottom: 0px;
}

<div id="root">
<div class="tray tray-top">
		<div class="button begin">1</div>
		<div class="button middle">2</div>
		<div class="button end">3</div>
	</div>
<div class="tray tray-left">
		<div class="button begin">4</div>
		<div class="button middle">5</div>
		<div class="button end">6</div>
	</div>
<div class="tray tray-right">
		<div class="button begin">7</div>
		<div class="button middle">8</div>
		<div class="button end">9</div>
	</div>
<div class="tray tray-bottom">
		<div class="button begin">10</div>
		<div class="button middle">11</div>
		<div class="button end">12</div>
	</div>
</div>

我必须将中间框position: absolute和他们的父母设置为position: relative，然后我才能改变他们在父母中的位置。