CSS : div에 숫자의 배수 인 높이를 둡니다?

div의 배경이 기울어집니다. 이 div의 높이는 내용에 따라 다릅니다. div가 배경 이미지 크기의 배수만큼 늘어나야합니다.CSS : div에 숫자의 배수 인 높이를 둡니다?

예를 들어, 배경은 64x64 이미지입니다. 따라서 div의 높이를 높이려면 64px 단위로 단계별로 높이기를 원합니다.

CSS로 가능합니까? Google을 사용하는 리드를 찾지 못했습니다. 시간 내 줘서 고마워!

출처

2012-02-10 Jem

자바 스크립트가 맞나요? – ANeves

css에서는이 작업을 수행 할 수 없습니다. 일반적으로 CSS는 동적으로 크기가 조정 된 요소의 내용에 따라 스타일을 설정하도록 허용하지 않습니다. – Oliver

간단한 CSS에서는 달성 할 수 없습니다. jQuery를 사용해보십시오. – NewUser

내 지식으로는 CSS에서 수행 할 수 없지만 일부 자바 스크립트로 해결할 수 있습니다. jQuery에 대한 액세스 권한이있는 경우 :

$(function() { 
    $div = $('#the_div_id'); 
    var remainder = $div.height() % 64; 
    var newHeight = $div.height() + (64-remainder); 
    $div.css('height', newHeight); 
});

출처

2012-02-10 14:07:22 Christoffer

jQuery 없이도 자바 스크립트로 해결할 수 있습니다. – Rob

그래, 문서 준비가 끝나면 내가 그렇게 할거야. thanks =) – Jem

여러분, 천만입니다. 그런데'$ (function() {...});'은 jQuery를 처음 접하는 경우를 대비하여 "DOM이 준비되면 이것을 수행한다"라는 약어이다. 그리고 @ Rob이 말했듯이, 네이티브 자바 스크립트에서도 할 수 있습니다. 개인적으로 jQuery를 선호합니다. – Christoffer

div의 내용은 무엇입니까? div의 크기를 올바른 값으로 설정하는 것 같고, 내용에주의를 기울여야합니다. this post 세부적인 간단한 기술로 작동해야하는 세로 리듬을 구현합니다 (예 : 64px의 라인 높이 사용)

출처

2012-02-10 14:10:47

사실 그것은 키치 UI에 관한 것입니다. div는 사다리를 나타내며 그 높이는 비례합니다. 화면 상단에서 div의 높이까지 - 종단 요소에 연결하는 데 필요한 타일링을 만듭니다. – Jem

하나의 해결책 (특정 경우에 따라 다름)은 새로운 background-size CSS 속성을 사용할 수 있습니다.

div.yourDiv { 
    background-image: url('yourImage.jpg'); 
    background-repeat: repeat; 
    background-size: contain; 
}

, 당신 div의 크기, 이미지 타일 완벽하지 않고 차단되는 것입니다 무엇 : 나는 선언이 명확하게 분리 왼쪽했습니다. 이전 버전의 브라우저는 바둑판 식으로 된 이미지를 얻습니다.이 이미지는 문제 일 수도 있고 아닐 수도 있습니다.

출처

2012-02-10 14:14:28 CherryFlavourPez

매우 흥미 롭습니다. 지금 시도해보십시오! – Jem

CSS : div에 숫자의 배수 인 높이를 둡니다?

답변

관련 문제