Question

任何人都可以帮助我使用看起来像这个表布局的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自动增长到孩子的身高。（#container的）
将所有子div设为均匀增长到其父级的大小。（#navBar，＃main）
将div放在父母的底部（#footer）

我尝试过一些CSS生成器没有成功。

这里的关键是 rowspan 很难在CSS / div中模拟（对于经验丰富的编码器，没有经验的设计师）

Answer 1

你可以这样做..

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>

将此表格布局转换为DIV布局

1 个答案: