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

Question

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

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

Answer 1

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

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

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

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