Question

使用960网格时，制作信息列表的正确方法是什么？通过信息列表，我具体指的是您在页面上显示用户的数据列表，而不是列表框或html控件。

例如，转到主页面（http://stackoverflow.com/）并查看“热门问题”列表。我想实现相同类型的列表，但使用960gs。

Answer 1

960gs只是一种将页面划分为网格而不是内容的不同部分的方法。一旦开始将内容放入这些部分，它就会变得或多或少无关紧要。

如果您有数据列表，请使用标准列表标记 - 包含一个或多个<ul>元素的<ol>或<li>。

如果您有表格数据（根据您的示例），则使用表格标记 - <table> <caption>，<thead>，<tfoot>，{{1} }，<tbody>，<tr>和<th>元素。

Answer 2

您可以将自己的列表包裹在<div class="container_12">中，然后针对列表中的每个项目迭代<div class="grid_12 row">

http://jsfiddle.net/Zm627/1/

<div class="container_12">
  <div class="grid_12 row">
      <div class="grid_1 alpha">
            1 Vote          
      </div>
      <div class="grid_1">
            1 Answer
      </div>
      <div class="grid_1">
            17 Views
      </div>
      <div class="grid_9 omega">
          <div class="grid_12">
              <div class="grid_6">
                    Find variations between two database tables effciently
              </div>    
          </div>

          <div class="grid_12">
              <div class="grid_6">
                  <button>sql-server</button>                                                      
                  <button>database</button>
                  <button>tsql</button>
                  <button>replication</button>
              </div>    
          </div>
      </div>
  </div>
</div>

960网格：制作网格列表的正确方法

2 个答案: