css 너비 간격

Question

좋아, 내가 전에는 들어 본 적이없는 문제가있다. CSS를 사용하여 요소 너비를 항상 10 픽셀 간격으로 지정해야합니다. 예를 들어, 요소의 너비가 11이면 56 => 60, 138 => 140 등이됩니다. ...

CSS에는이 방법이 있지만 어쨌든 물어볼 줄 알았는데. 이 같은 것이 좋을 것입니다.

div { width-interval: 10px; } 

Answer 1

CSS는 속성이 없습니다,하지만 당신은 다음과 같은 추가 자바 스크립트 요소의 스타일 폭 수 있습니다 :

<script type="text/javascript"> 
$(function(){ 
    var widthInterval = 20; 
    $('div').each(function(){ 
     var $this = $(this); 
     var divisions = parseInt($this.width()/widthInterval) + 1; 
     var resWidth = (divisions * widthInterval) + "px"; 
     $this.css('width', resWidth); 
     console.log("Resulted width: " + resWidth); 
    }); 
});  
</script> 

그것이 도움이되기를 바랍니다.

Answer 2

이 문제는 달리 지정하지 않는 한 블록 수준 요소는 항상 창의 크기임을 나타냅니다. 보다 구체적인 폭을 지정하면 너비 반전이 필요하지 않습니다.

두 가지 경우가 다를 수 있습니다.

1. 요소 즉 퍼센트 상대 폭을 갖는 경우, 블록 레벨 요소

2. (수레와 인라인 블록의 경우) 수축 포장되는 경우.

하지만 상대적으로 설정하는 경우이 페이지의 다른 일을 기준으로해야하는데 때문이 복잡 것, 그래서 다른 일을 조정해야했다 때, 간격이 필요하지 않을 보상.

<div id="one"></div> 
<div id="two"></div> 

및 규칙 : 하나의 승리

#one { 
width: 50%; 
width-interval: 25px; 
} 

#two { 
width: 50%; 
width-interval: 27px; 
} 

예를 들어, 만약 내가 두 개의 div가 있었다? 사진이나 텍스트를 정렬하는 것이 중요 할 경우 다른 쪽보다 우선하기를 원하지 않을 수도 있지만 둘 다 무시할 수는 없습니다.

나는 아이디어가 좋다고 생각하지만, 자바 스크립트로 처리하는 것이 더 낫습니다. 왜냐하면 동적이고 "가장 가까운"간격을 기반으로하기 때문입니다. 이것은 작동 할 수 있습니다 :

$(function() { 

$(div).each(function() { 
    var cur_width = $(this).width(); 
    var inverval_diff = cur_width % 10; 
    $(this).width(cur_width + inverval_diff); 
}); 

}); 

위의 내용은 js 프레임 워크로 사용하지 않는 경우 jquery에 있습니다.