带有html5标头标签的960网格

时间:2013-02-01 23:10:51

标签: html css html5 960.gs

我是960.gs的新手,遇到了一些问题和html5。

我正在尝试以下方法: 图像应该跨越 2个网格单位,并且在同一行中div应该跨越 5个单位然后(因为该“行”已满)应该跟随换行符和标题应该显示。我尝试了以下方式:

<div class="container_12">
    <header class="grid_12">
        <img src="nothing" class="grid_2 alpha"><div class="grid_5 suffix_5">SOMETHING</div>
        <h1 class="grid_2 omega">title</h1>
    </header>
</div>

在我对960.gs的理解中,这应该会产生预期的效果。它实际上没有:它在一行显示图像,div和标题在彼此之下,并在下一行稍微缩进。这是因为除了div之外还使用了其他元素吗?

提前感谢您的帮助! (我从http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/)获得了大量信息

1 个答案:

答案 0 :(得分:1)

<div class="container_12">
<header>
    <div class="grid_9">
        <div class="grid_2 alpha">
            <img src="http://showbuzz.ru/wp-content/uploads/2009/09/dead_earners_9_wenn1642245.jpg" class="grid_2 alpha" />  
        </div>
         <div class="grid_7 omega">
           SOMETHING
         </div>
         <div class="grid_9 alpha omega">
             <h1>title</h1>  
         </div>
    </div>
  </header>

http://jsfiddle.net/TMAk7/

它适合你吗?