2

更新

http://www.jsfiddle.net/dougrchamberlain/nMkxE/

看看这一切是如何分崩离析的。id=middle 的宽度应该跨越整个剩余的中心#left:width - #wrapper:width = #middle:width

如果#right 包含任何内容，则

(#left:width + #right:width) - #wrapper:width = #middle:width

最新编辑

仅供大家参考。下面的图像是在 MSpaint 中创建的。根本没有使用 HTML。

编辑

这不应该是一个技巧问题。另外，请仅将 html4 视为一种选择。显然我错过了 HTML4 标签。另外，你们是否都考虑过右窗格在为空时应该折叠的事实。

div布局结构

不包括实际功能的任何嵌套 div，即菜单内容区域等...

我的数是6？？？

4

2 回答 2

0

编辑：如果您使用页眉、左、中和右，您只需 4 个 div，只需将页脚中的第一个元素设置为 clear：left；

最简单的方法是做类似的事情

身体 p { 清除：左；}

如本例所示：http: //jsfiddle.net/86M3M/1/

...如果您使用 html5：不需要 div ;)

<!DOCTYPE html> 
    <html>    
    <head>...</head>
    <body>

    <header>
       ...
       <nav id="main"> ... </nav>
    </header>

    <nav id="left"> ... </nav>

    <section id="main_content"> ... </section>

    <section id="right_content"> ... </section>

    <footer> ... </footer>

    </body> 
    </html>
于 2011-01-25T02:14:47.343 回答
0

如果您不必将元素包装在固定宽度的 div 中，则只需要 5 - 否则为 6。

  1. 标题
  2. 剩下
  3. 中间
  4. 正确的
  5. 页脚
  6. 包装器（可选）

我只是希望你不要试图通过最小化布局的 div 数量来节省几个字节:)

于 2011-01-24T22:02:29.807 回答