帶有書籤式樣的文字div

Question

我寫了jsfiddle example以便更好的解釋，那麼，如何讓紅色條紋填充整個高度.frame？也許有什麼更好的辦法來製造這樣的事情嗎？

Answer 1

我自己解決。 JSfiddle demo。

var move_bookmark = function(){ 
    var sh = parseInt($(this).css('height').replace('px','')); 
    var ph = parseInt($(this).parent().css('height').replace('px','')); 
    if (sh%2==0)//this is for solving [this problem] - 
//http://math.stackexchange.com/questions/183018/pixel-rectangle-precise-rotating 
    { 
     if(ph%2!=0) 
     { 
      ph++; 
      $(this).parent().css('height',ph+'px'); 
     } 
    } 
    else 
    { 
     if(ph%2==0) 
     { 
      ph++; 
      $(this).parent().css('height',ph+'px'); 
     } 
    } 
    $(this).css('width',ph+'px'); 
    var sw = ph; 
    var offset = parseInt(ph-sw/2-sh/2)+'px' 
    console.log(sw+"/"+sh); 
    $(this).css('top',offset); 
    $(this).css('left',-sw/2+sh/2+'px'); 
    $(this).parent().css('padding','0px 0px 0px '+sh+'px'); 
} 
$('.bookmark').each(move_bookmark); 

Answer 2

定位元素不再是佈局的一部分，因此他們不知道父元素的尺寸是什麼。你需要使用JavaScript來做到這一點。