昨晚(直到清晨)花了几个小时来解决这个布局问题。我阅读了大量的 css3 提示和技巧，但我找不到可以帮助我解决这个问题的方法。
看我的 fiddle : http://jsfiddle.net/aWsmb
底部，行:有一个 NAV 需要在左边，一个 SUBCONTENT 需要在右边(经典)。出于某种原因，SUBCONTENT 不想玩也不想表现得很好。它要么“射”在 NAV 后面，要么紧挨着它，但它不会使用所有可用宽度并与页脚重叠。参见 fiddle 。
这就是我要找的:
---------------------------------
| header |
---------------------------------
| main nav |
---------------------------------
| main section |
---------------------------------
| NAV | SUBCONTENT (full-widh) |
| | |
---------------------------------
| footer |
---------------------------------
然后是另外两个问题:
<div id='subnav'> = better to ASIDE for this?
<div id='association'> = better to use ARTICLE here?
最佳答案
不是将 association div 向左浮动，您可以取下 float 并给它一个 margin-left 侧边导航的大小 + 您想要的任何填充.例如:http://jsfiddle.net/aWsmb/15/ .这样它也会填充它的父容器。否则，如果您确实使用了 float ，请在父级上使用 overflow: auto 以确保子级填写它。
是的，如果您想要语义化，请将 aside 用于子导航。不过我不会太担心它 - 有语义布局很好，但这不是你能做的最糟糕的事情 :p
关于并排放置 HTML5/CSS 布局 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9601330/