Имитация rowspan с помощью CSS и Div? - PullRequest
2 голосов
/ 26 января 2010

Привет. Я пытаюсь смоделировать свойство rowspan в css с помощью divs и тегов, поэтому его можно изменить на 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 снизу, когда вы выбираете один сверху, его нужно расширять, занимая пространство отсутствующего элемента ниже.

1 Ответ

1 голос
/ 26 января 2010

Использование javascript (и jQuery) позволит вам использовать более простые для понимания и семантически соответствующие атрибуты rowspan и colspan ячеек table.

jQuery очень прост в освоении! И вы найдете много помощи здесь, на Stackoverflow:)

...