-1

我有一个包含在 DIV 类中的现有字段表：

 1  2  3  4
 5  6  7  8

想象一个包含两行四列的表格，这些表格包含在与其位置相匹配的 div 类中。我需要像这样在当前表下方移动 3、4、7、8：

 1  2 
 5  6  
 3  4  7  8

实现这一点的最佳方法是什么（CSS、Javascript 等）？

编辑：这里有一些代码供大家查看...

<table>

  <tbody>
          <tr class="row-1 row-first">
                  <td class="col-1 col-first 1-classed">

  <div>        <span class="field-content"><a href="/test1">Test 1</a></span>  </div>  
  <div>        <span class="field-content"><img src="image1.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-2 2-classed">

  <div>        <span class="field-content"><a href="/test2">Test 2</a></span>  </div>  
  <div>        <span class="field-content"><img src="image2.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-3 3-classed">

  <div>        <span class="field-content"><a href="/test3">Test 3</a></span>  </div>  
  <div>        <span class="field-content"><img src="image3.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-4 col-last 4-classed">

  <div>        <span class="field-content"><a href="/test4">Test 4</a></span>  </div>  
  <div>        <span class="field-content"><img src="image4.jpg" width="50" height="50"></span>  </div>          </td>
              </tr>
          <tr class="row-2">
                  <td class="col-1 col-first 5-classed">

  <div>        <span class="field-content"><a href="/test5">Test 5</a></span>  </div>  
  <div>        <span class="field-content"><img src="image5.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-2 6-classed">

  <div>        <span class="field-content"><a href="/test6">Test 6</a></span>  </div>  
  <div>        <span class="field-content"><img src="image6.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-3 7-classed">

  <div>        <span class="field-content"><a href="/test7">Test 7</a></span>  </div>  
  <div>        <span class="field-content"><img src="image7.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-4 col-last 8-classed">

  <div>        <span class="field-content"><a href="/test8">Test 8</a></span>  </div>  
  <div>        <span class="field-content"><img src="image8.jpg" width="50" height="50"></span>  </div>          </td>
              </tr>
          <tr class="row-3 row-last">
                  <td class="col-1 col-first 9-classed">

  <div>        <span class="field-content"><a href="/test9">Test 9</a></span>  </div>  
  <div>        <span class="field-content"><img src="image9.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-2 10-classed">

  <div>        <span class="field-content"><a href="/test10">Test 10</a></span>  </div>  
  <div>        <span class="field-content"><img src="image10.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-3 11-classed">

  <div>        <span class="field-content"><a href="/test11">Test 11</a></span>  </div>  
  <div>        <span class="field-content"><img src="image11.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-4 col-last 12-classed">

  <div>        <span class="field-content"><a href="/test12">Test 12</a></span>  </div>  
  <div>        <span class="field-content"><img src="image12.jpg" width="50" height="50"></span>  </div>          </td>
              </tr>
      </tbody>
</table>
4

1 回答 1

0

所以......我最终使用表格来完成这个。我被 DIV 编码困住了，在阅读了几个论坛后我得到了一个警钟。这是表格数据，应在表格中表示。

<table width="100%" style="border:1px solid red">
<tr><td>
    <h3>Title</h3>
</td>
</tr>

<tr>
 <td align=center>1</td>
 <td align=center>2</td>
 <td align=center>3</td>
 <td rowspan=2 align=center>4</td>
</tr>

<tr>
 <td align=center>5</td>
 <td align=center>6</td>
 <td align=center>7</td>
</tr>

<tr>
 <td align=center>8</td>
 <td align=center>9</td>
 <td align=center>10</td>
 <td align=center>11</td>
</tr>

</table>
于 2013-04-24T21:21:45.987 回答