当前位置：文江博客话题详情

可用于创建以下页面布局的最少 div 数量是多少？

发布于 2024-10-14 09:21:37 字数 709 浏览 3 评论 0原文

更新

http://www.jsfiddle.net/dougrchamberlain/nMkxE/< /a>

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

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

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

最新编辑

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

编辑

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

Div 布局结构

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

我的计数是 6？ ??

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陈独秀 2024-10-21 09:21:37

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

header
left
middle
right
footer
wrapper (可选)

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

回复收藏 0 原文

故事未完 2024-10-21 09:21:37

编辑：如果您使用 header、left、center 和 right，则只需 4 个 div，只需将页脚中的第一个元素设置为clear: left;

最简单的方法是执行类似

body p {clear: left; 的操作。 }

如本例所示： 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>

EDIT: You can get away with just 4 divs if you use header, left, center, and right, and simply set the first element in the footer to clear: left;

The easiest way to do that is to do something like

body p { clear: left; }

as in this example: http://jsfiddle.net/86M3M/1/

...and If you use html5: No divs needed ;)

<!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>

回复收藏 0 原文

~没有更多了~