用 css 和 div 模拟行跨度？答案

【问题标题】：Simulating rowspan with css and divs?用 css 和 div 模拟行跨度？
【发布时间】：2011-01-09 11:13:09
【问题描述】：

您好，我正在尝试使用 div 和标签模拟 css 上的 rowspan 属性，因此可以在 a: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 个元素，所以当您选择顶部的元素时，它需要扩展以占用下方缺失元素的空间。

【问题讨论】：

只是一个旁注。如果它是您正在创建的表，您不能使用 TABLE 元素吗？如果你想使用“语义干净”的解决方案，那么列表应该用UL 或OL 标记并包含LI 元素来分隔列表项。
感谢您的评论，我不能使用表格，因为单击超链接时我需要更改css的rowspan属性，而css没有rowspan属性。
你不能用一点Javascript来帮忙吗？如果可以的话，你真的应该用正确的语义标记文本。
你会使用Javascript吗？如果是这样，那么使用<table> 和像 jQuery 这样的库。
我想我可以，但我想尽可能避免使用 javascript 并且只使用 css，否则我将不得不使用 javascript。谢谢。

标签： html css alignment html-table

【解决方案1】：

使用 javascript（和 jQuery）可以让您使用更易于理解且语义适当的 rowspan 和 colspan 属性 table 单元格。

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

【讨论】：

我假设提问者对编程有一定的了解:)
嗨 MDCore，可以这么说，没有我想要的那么多，我做了一些 javascript、vbscript 但不幸的是，由于我的工作没有太多。尝试利用自己的时间学习，但没有太多忙碌的生活。