CSS中的自动边缘功能，而不是JS [英] automated margin functionality in CSS, not JS

问题描述

我有一个用jQuery编写的函数，自动化 margin-bottom 或 padding-bottom 一张桌子。基本上，它抵消了表格单元格边框向下推动页面的效果，保持垂直节奏完好无损。 而不是使用JS来做到这一点，我相信我应该能够用Less和CSS代替。

条件（if语句）是基于表中的行数（以及边界，再加上一个）。自从我的幻数是24（24px是垂直节奏单位），如果表有（0,11）∪（24,35）∪…边框，函数将使 margin-bottom 为负值，并向上拉剩余页面。然而，如果桌子有（12,23）&杯;（36,47）&杯;…边框，它将添加到 padding-bottom ，将剩余的页面下推到下一个垂直节奏单元。这都是假设表中的每个水平边界都是1px。

以下是我在jQuery中的功能：

  / * 
算法：每个表的
：
取行数（x）
 add 12 
 mod 24 
 subtract 12 
 negate。 
函数符号：g（x）=  - （f（x + 12）-12）其中f（x）= MOD（x，24）
函数转换：MOD 12和向下12，然后在x轴上翻转。 
如果g（x）<= 0，那么margin-bottom那个数字
 else，填充那个数字。 
 * / 
 $（'table'）。each（function（）{
 var n_rows = 0; 
 $（this）.find（'tr'）。 
 var btm =  - （（（n_rows + 12）％24） - 对于最后一个边界
 var btm =  - （（（n_rows + 12）％24） -  
 n_rows ++; 12）; 
 if（btm <= 0）{$（this）.css（'margin-bottom'，btm）;} 
 else {$（this）.css（'padding-bottom '，btm）;} 
}）; 
  

这是我到目前为止在我的收入：

  table {
 counter-reset：nrows; 
 tr {
 counter-increment：nrows; 
} 
 counter-increment：nrows; //再次为最后一个边界
 // @btm： - （（（nrows + 12）％24） -  12）; 
 // if（@btm< = 0）{
 // margin-bottom：@btm; 
 //} else {
 // padding-bottom：@btm; 
 //} 
} 
  

帮助我吗？

解决方案

如果我明白你的问题，你可以使用 nth-child pseudo class 。

>

  .childern（@i）{
 .margins（@i）when（@i&和（@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代码，如下所示：
 
 
 
 
 
 
 < b $ b 
  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; 
} 
  
 
I have a function written in jQuery that automates the margin-bottom or padding-bottom (conditionally) of a table. Basically it negates the effect of the table cells' borders pushing down the page, keeping the vertical rhythm intact. Instead of using JS to do this, I believe I should be able to with Less and CSS instead.

The condition (if-statement) is based on the number of rows (and thus borders, plus one more) in the table. Since my "magic number" is 24 (24px is the vertical rhythm unit), if the table has (0,11)∪(24,35)∪… borders, the function will make the margin-bottom negative and pull the rest of the page up. However if the table has (12,23)∪(36,47)∪… borders, it will add to the padding-bottom, pushing the rest of the page down to the next vertical rhythm unit. This is all operating under the assumption that each horizontal border in the table is 1px. Extra credit if you can generalize the pattern to work for thicker borders.

Here's my function in 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);}
});
Here's what I have so far in my 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;
//  }
}
Help me out here?
解决方案
If i understand your question well, you can use the nth-child pseudo class.

less
.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;
The above Less code will compile into CSS code as follows:
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;
}


                        
这篇关于CSS中的自动边缘功能，而不是JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！