谁能帮我设计一个看起来像这个表格布局的 DIV/CSS 布局?
<table id="container">
<tr>
<td colspan="2" id="header">
Header
</td>
</tr>
<tr>
<td rowspan="2" id="navBar">
Navigation bar
</td>
<td>
Main content
</td>
</tr>
<tr>
<td id="footer">
Footer
</td>
</tr>
</table>
表格的CSS在这里:
<style type="text/css">
#container
{
width: 100%;
min-width: 800px;
border-collapse: collapse;
}
#header
{
height: 78px;
background-color: Orange;
}
#navBar
{
width: 200px;
background-color: Gray;
}
#footer
{
height: 50px;
background-color: Silver;
}
</style>
我遇到了严重的问题,因为我不能:
- 让父级 div 自动增长到它的 child 的高度。 (#容器)
- 使所有子 div 都均匀 增长到其父级高度的大小。 (#navBar,#main)
- 始终将一个 div 置于其父元素的底部 (#footer)
我尝试了一些 CSS 生成器但没有成功。
这里的关键是 rowspan 很难在 CSS/div 中模拟(对于经验丰富的编码人员,没有经验的设计师)
最佳答案
你可以那样做..
HTML
<div id="container">
<div id="header">Header</div>
<div id="navBar">Navigation bar</div>
<div id="content-here">content here
<div id="footer">Footer</div>
</div>
</div>
CSS
<style type="text/css">
#container
{
width: 100%;
min-width: 800px;
border-collapse: collapse;
}
#header
{
height: 78px;
background-color: Orange;
}
#navBar
{
width: 200px;
background-color: Gray;
}
#footer
{
height: 50px;
background-color: Silver;
}
</style>
关于css - 将此表格布局转换为 DIV 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14581446/