Question

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

 1  2  3  4
 5  6  7  8

想象一个包含两行和4列的表，这些表包含在与其位置匹配的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>

Answer 1

所以......我最终用表来完成这个。我是如此坚持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>

CSS位置元素相对于特定元素

1 个答案: