1

我有一个用 jQuery 编写的函数，可以自动执行表的margin-bottomor padding-bottom（有条件地）。基本上，它消除了表格单元格边框向下推动页面的效果，保持垂直节奏完整。我相信我应该能够使用 Less 和 CSS，而不是使用 JS 来做到这一点。

条件（if 语句）基于表中的行数（因此边框，再加一个）。由于我的“幻数”是 24（24px 是垂直节奏单位），如果表格有 (0,11)∪(24,35)∪… 边框，函数会做margin-bottom负数并将页面的其余部分向上拉. 但是，如果表格有 (12,23)∪(36,47)∪… 边界，它将添加到padding-bottom，将页面的其余部分向下推到下一个垂直节奏单元。这一切都是在假设表格中每个水平边框为 1px 的情况下运行的。如果您可以概括该模式以适用于较厚的边框，则可以加分。

这是我在 jQuery 中的函数：

/*
Algorithm:
for each table:
take the number of rows (x)
add 12
mod 24
subtract 12
negate.
function notation: g(x) = -(f(x+12)-12) where f(x) = MOD(x,24)
function transformation: MOD(x,24) translated left 12 and down 12, then flipped over the x-axis.
if g(x) <= 0, then margin-bottom that number
else, padding-bottom that number.
*/
$('table').each(function () {
    var n_rows = 0;
    $(this).find('tr').each(function () {
        n_rows++;
    });
    n_rows++; // once more for the last border
    var btm = -(((n_rows + 12) % 24) - 12);
    if (btm <= 0) {$(this).css('margin-bottom',btm);}
    else          {$(this).css('padding-bottom',btm);}
});

到目前为止，这是我的 Less 中的内容：

table {
    counter-reset: nrows;
    tr {
        counter-increment: nrows;
    }
    counter-increment: nrows; // once more for the last border
//  @btm: -(((nrows + 12) % 24) - 12);
//  if (@btm <= 0) {
//      margin-bottom: @btm;
//  } else {
//      padding-bottom: @btm;
//  }
}

帮帮我？

4

1 回答 1

0

如果我很好地理解了您的问题，您可以使用nth-child 伪类。

较少的

.childern(@i){
.margins(@i) when (@i > 0) and (@i < @number/2) {
.margins((@i - 1));
tr:nth-child(@{number}n+@{i})
{
margin-bottom: ~"-@{i}px";
}
}
.margins(@i) when (@i > (@number/2-1)) {
.margins((@i - 1));
tr:nth-child(@{number}n+@{i})
{
padding-bottom: unit(@number - @i,px);
}
}
.margins(@i);
}
table {
.childern(@number);
}
@number: 24;

上面的 Less 代码会编译成 CSS 代码如下：

table tr:nth-child( 24n + 1) {
  margin-bottom: -1px;
}
table tr:nth-child( 24n + 2) {
  margin-bottom: -2px;
}
table tr:nth-child( 24n + 3) {
  margin-bottom: -3px;
}
table tr:nth-child( 24n + 4) {
  margin-bottom: -4px;
}
table tr:nth-child( 24n + 5) {
  margin-bottom: -5px;
}
table tr:nth-child( 24n + 6) {
  margin-bottom: -6px;
}
table tr:nth-child( 24n + 7) {
  margin-bottom: -7px;
}
table tr:nth-child( 24n + 8) {
  margin-bottom: -8px;
}
table tr:nth-child( 24n + 9) {
  margin-bottom: -9px;
}
table tr:nth-child( 24n + 10) {
  margin-bottom: -10px;
}
table tr:nth-child( 24n + 11) {
  margin-bottom: -11px;
}
table tr:nth-child( 24n + 12) {
  padding-bottom: 12px;
}
table tr:nth-child( 24n + 13) {
  padding-bottom: 11px;
}
table tr:nth-child( 24n + 14) {
  padding-bottom: 10px;
}
table tr:nth-child( 24n + 15) {
  padding-bottom: 9px;
}
table tr:nth-child( 24n + 16) {
  padding-bottom: 8px;
}
table tr:nth-child( 24n + 17) {
  padding-bottom: 7px;
}
table tr:nth-child( 24n + 18) {
  padding-bottom: 6px;
}
table tr:nth-child( 24n + 19) {
  padding-bottom: 5px;
}
table tr:nth-child( 24n + 20) {
  padding-bottom: 4px;
}
table tr:nth-child( 24n + 21) {
  padding-bottom: 3px;
}
table tr:nth-child( 24n + 22) {
  padding-bottom: 2px;
}
table tr:nth-child( 24n + 23) {
  padding-bottom: 1px;
}
table tr:nth-child( 24n + 24) {
  padding-bottom: 0px;
}
于 2014-10-15T22:36:07.063 回答