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 +内容之间的边距。使用您的代码，您必须在#navi和#content上指定它两次。

Answer 2

不要认为它太复杂 - 只需将标题设置为宽度100％即可。看看：http://jsfiddle.net/ASy67/

<div id="header"></div>
<div id="left"></div>
<div id="right"></div>

CSS：

div {
    height: 100px;
}
#header {
    background: #f00;
    width: 100%;
}
#left {
    background: #0f0;
    float: left;
    width: 200px;
}
#right {
    background: #f0f;
    width: 600px;
}

通过此示例，内容确实显示在左侧边栏的后面。您可以通过将float: right;添加到#right或padding-left: 200px;添加到#right来解决此问题。

简单的DIV布局：标题，导航，内容

2 个答案: