css - 简单 DIV 布局 : Header, 导航、内容

Question

我正在寻找经典的页面布局:

标题 800 像素，导航(左)200 像素，内容(右)600 像素

是否可以只将它放在 3 个 DIV 中？

<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>

因为到目前为止我发现的每个布局都是这样构建的:

<div id="header">Header</div>
<div id="panel">
    <div id="navi">Navi</div>
    <div id="content">Content</div> <!-- position absolute left:200px -->
</div>

谢谢! 罗马

Answer 1

你一定可以按照你说的去做。

关键是代码:

<div id="header">Header</div>
<div id="panel">
  <div id="navi">Navi</div>
  <div id="content">Content</div> <!-- position absolute left:200px -->
</div>

将更容易制作和维护。例如，您只需要在#panel 上指定一个 margin-top 来控制 header 和 nav+content 之间的边距。对于您的代码，您必须在#navi 和#content 上指定它两次。