我是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/获得了很多信息)

最佳答案

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

它对您有用吗?

关于html - 带有html5 header 标签的960网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14656642/

10-11 13:18