如何在 css 中的面板内制作小方框

How can i make small square boxes inside panel in css

我的项目正在使用 zurb foundations 但我不太了解它。

我需要这样设计布局。这是草图

页眉需要居中,小方框内的文字也应该居中。

这是我试过的

http://jsfiddle.net/utnobcL1/

方框应该在300 width , 400height

左右

http://jsfiddle.net/utnobcL1/2/

这里有一个快速模型供您使用。

.container {
    width:100%;
    border:1px solid black;
}

.box {
    width:100px;
    margin:auto;
    border:1px solid black;
    margin-top:10px;
}

.header {
    text-align:center;
    background-color:grey;
}

更新

http://jsfiddle.net/utnobcL1/4/