我该如何订购我的div?

时间:2010-04-14 19:59:59

标签: css html css-float

这是我正在处理的页面的基本布局:
alt text http://www.mfrl.org/images/pagelayout.png
订购div的最佳/最简单方法是什么? C可能显示也可能不显示(这是仅在有新闻时显示的新闻提醒)。 A =标题,B =菜单,E& F =标准内容列,D =最新博客文章。 我认为ABCEFD可能最有意义,但我也可以看到ABCDEF。使用花车这些中的任何一个都应该相当容易......有更好的方法吗?也许把CEF放在“中间栏”div中?

4 个答案:

答案 0 :(得分:2)

你可能不得不做更接近ADBCFE的事情。

请记住,向右浮动的分区必须首先出现,然后分裂向左浮动,然后是在它们之间扩展的主分区。所以A显然是第一位的。然后D将向右浮动,B将浮动到左侧。最好在中间使用一个单独的分区,然后将C放在顶部,然后将F浮动到右边,E浮动到左边,或者你想要那两个在中间处理。

答案 1 :(得分:1)

在选择将div放入文档中的顺序时,请考虑辅助功能。例如,屏幕阅读器倾向于以标记顺序从上到下阅读,因此在页面中较早地放置内容(C,E,F,D?)可能会更好。

如果你不能以这种方式安排你的内容,那么就不能制作一个可行的CSS布局,至少考虑添加一个链接到目标,跳转到内容,以便使用屏幕阅读器的人通过跳过更有效地浏览你的网站在您的网站上查看多个页面时,(可能是静态的)标题和菜单。

答案 2 :(得分:0)

我会制作一个标题div = a和一个body div {b,c,d,e,f}。在体内div中,我会在div中分组{e,f}或者{c,e,f}

但那仅仅是我的2美分

答案 3 :(得分:0)

有很多方法可以做到这一点。这就是我要做的事情:

<div id="header"></div>
   <div id="A"></div>
</div>
<div id="main">
   <div id="left">
      <div id="B"></div>
   </div>
   <div id="center">
      <div id="C"></div>
      <div id="E"></div>
      <div id="F"></div>
   </div>
   <div id="right">
      <div id="D"></div>
   </div>
</div>