html - 我怎样才能在CSS中的面板内制作小方框

标签 html css zurb-foundation

我的元素正在使用 zurb foundations 但我对此了解不多。

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

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

这是我试过的

http://jsfiddle.net/utnobcL1/

盒子应该在 300 宽度,400 高度

enter image description here

最佳答案

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/

关于html - 我怎样才能在CSS中的面板内制作小方框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28110358/

相关文章:

html - Office Outlook 客户端中的 Div 宽度不正确

css - 悬停在跨度上时显示图像

css - 如何覆盖基础 Accordion 样式?

css - Zurb 基金会 : Prevent empty column collapsing to zero width

css - 向 MediaWIki 中的表格添加水平滚动条(Pivot 主题)

html - 彼此相邻的 CSS 图像幻灯片图像

html - 如何将绝对定位的元素保持在原位?

css - Angular MaterializeCSS 重叠标签与输入

html - 需要帮助理解 "position"和 "float"的 css

css - 全宽背景图像大小