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

Question

我花了很多时间试图弄清楚如何以以下格式创建 html 布局，但没有运气。有人可以指导我正确的方向吗？谢谢

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

| headerDiv1 | hDiv2 |

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

| contentDiv1 | cDiv2 |

| | |

| | |

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

| 页脚Div1 | fDiv2 |

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

Answer 1

从使用网格系统开始，例如http://twitter.github.io/bootstrap/scaffolding.html#gridSystem或您身边的许多其他人。设计布局会容易得多。

Answer 2

这也可以很容易地在 HTML 和 CSS 中完成。您可以在这里看到一个工作示例 - 网格布局。

如果您愿意使用外部库，Twitter Bootstrap当然是另一个不错的选择。它为您提供了一些其他非常好的功能（例如图标等）。

如果您正在做一些基本的事情，我可能只会使用 CSS 而不必担心外部库。如果你有更大的项目，或者计划在未来经常做这样的事情，那么学习 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;

}