Question

您好我正在尝试使用div和标签模拟css上的rowspan属性，因此可以在：active = double height上进行更改，但此时它会从两行增加到三行。

它仅在扩展第一列时才有效，如果我扩展第二列，第三列等，那么它将增长到三行。

这是一个有效的示例代码，它保留在两行中。

<div style="float:left;width:750px;text-align:center;height:30px;">

   <a href="#" style="float:left;width:149px;height:30px;">1</a>
   <a href="#" style="float:left;width:149px">2</a>
   <a href="#" style="float:left;width:149px">3</a>
   <a href="#" style="float:left;width:149px">4</a>
   <a href="#" style="float:left;width:149px;">5</a>

   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
</div>

但如果我这样做：

<div sytle="width:750px;text-align:center;height:30px;float:left">
<!--Row 1---->
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px;height:30px;">2</a>
   <a href="#" style="float:left;width:149px">3</a>
   <a href="#" style="float:left;width:149px">4</a>
   <a href="#" style="float:left;width:149px;">5</a>
<!--Row 2---->
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
   <a href="#" style="float:left;width:149px">1</a>
 </div>

然后它会增长到三行。

我正在尝试使用两行标签，因此当您选择顶部的标签时，它会展开该行以指示其已被选中。

因为顶部有5个元素，底部有4个元素，当你选择顶部的元素时，它需要扩展时占用下面缺少的元素的空间。

Answer 1

使用javascript（和jQuery）可以让您更容易理解 - 在语义上更合适 - rowspan个colspan个细胞的table属性。

jQuery非常容易学习！你会在Stackoverflow上找到很多帮助：）

用css和div模拟rowspan？

1 个答案: