如何使用DIV创建html页面布局

Question

我花了这么多时间试图弄清楚如何以下面的格式创建html布局而没有运气。有人能引导我朝正确的方向发展吗？感谢

----------------------------------------------- ------------------

| headerDiv1 | hDiv2 |

----------------------------------------------- ------------------

| contentDiv1 | cDiv2 |

| | |

| | |

----------------------------------------------- ---------------

| footerDiv1 | fDiv2 |

----------------------------------------------- ---------------

Answer 1

首先使用网格系统，例如http://twitter.github.io/bootstrap/scaffolding.html#gridSystem或其他许多人。 设计布局要容易得多。

Answer 2

这也可以通过HTML＆amp; amp; CSS。你可以 see a working example here - Grid Layout 。

如果您愿意使用外部库，

Twitter Bootstrap当然是另一个不错的选择。它为您提供了一些非常好的功能（例如图标等）。

如果你正在做一些基本的事情，我可能会选择CSS＆amp;不必担心外部库。如果您有更大的项目，或者计划在将来经常做这样的事情，那么学习Bootstrap是值得的。

<强> HTML

<div id="columns">
    <div class="col1">
        <div id="headerDiv1">
            <p>header div</p>
        </div>
        <div id="contentDiv1">
            <p>content div</p>
        </div>
        <div id="footerDiv1">
            <p>footer div</p>
        </div>
    </div>
    <div class="col2">
        <div id="hDiv2">
            <p>header div right side</p>
        </div>
        <div id="cDiv2">
            <p>content div right side</p>
        </div>
        <div id="fDiv2">
            <p>footer div right side</p>
        </div>
    </div>
</div>

<强> CSS

#columns{
    display: table;
    width: 500px;
}

.col1{
    display: table-cell;
    width: 80%;
    padding: 1em;
    position: relative;
    left: auto;
}
.col2{
    width: 20%;
    display: table-cell;
    padding: 1em;
    position: relative;

}