2009-06-23 7 views
0

JavaScript 또는 CSS을 사용하여 div를 조각 수로 잘라내는 방법이 있습니까? 나는 내용이 담긴 긴 div가 있습니다. div를 특정 높이에 따라 분할하고 각 부분을 별도의 블록으로 표시해야합니다. 이것을 달성하는 가장 쉬운 방법은 무엇입니까?div 요소 나누기

주 div의 높이가 1500px라고 가정합니다. div를 각각 500px의 높이로 3 조각으로 분할해야합니다.

div의 높이가 1600px 인 경우 4 조각으로 분할해야합니다. 높이가 각각 500px이고 높이가 100px 인 첫 3면.

+0

해당 div의 코드를 게시하고 Google에서 볼 수있는 페이지로 연결하십시오. –

답변

-1

요소의 높이를 폴링 한 다음 포함 된 div에서 500px div를 추가 또는 제거하도록 설정할 수 있습니다.

<script type="text/javascript"> 
    function checkDiv() { 
     alert(document.getElementById('FormBody').offsetHeight); 
     setTimeout(checkDiv, 5000); 
    } 
    setTimeout(checkDiv, 5000); 
</script> 

다음 단계는을 사용하여 새 사업부에 추가 'FormBody'에에 appendChild를 호출하는 것입니다 : 여기

는 5 초마다 검사를 계속 사업부의 높이를 활용하는 방법의 예 DOM.

0

div는 별도의 조각으로 절단 할 수 없습니다. 특정 높이와 너비로 스타일을 지정할 수 있습니다.

+0

스타일을 어떻게 적용 할 수 있습니까? 나는 clip 속성을 사용했다. 다른 대안이 있습니까? – rahul

+0

style = "height : 200px; width : 200px; overflow : hidden;"을 사용할 수 있습니다. –

+0

하지만 두 번째 div에 나머지 텍스트를 표시해야합니다. – rahul

1

약간 이상한 질문입니다.

div가 코드가 아닌 경우 div의 원래 높이를 결정하는 것은 무엇입니까? 내용물의 크기는?

당신 동적으로 다음, 자바 스크립트를 사용하여 DIV의 크기를 폴링 추가 된 div를 생성하고 (엄지 손가락의 일부 해키 규칙에 의해) div의에서 콘텐츠를 분할 (나는 가정) 다음, 그들을 뒤에 추가하지만, 경우 수 당신은 그런 종류의 길이로 갈 것입니다, 왜 서버에서 미리하지 않겠습니까? 특히 클라이언트의 경우 브라우저가 높이를 계산할 수 있도록 처음 렌더링을 마칠 때까지 기다려야하므로 (아마도 상상할 수 있습니다.) 따라서 매우 불미스러운 효과가있을 수 있습니다.

+0

콘텐츠를로드 한 후에 내 콘텐츠가 포함 된 div 수를 계산할 수 있기 때문에 브라우저에서 콘텐츠 렌더링을 완료해야합니다. – rahul

+0

콘텐츠에 이미지가 포함되어 있다면 언제나 'div 크기'의 덩어리로 잘라낼 수 있습니까? 그리고 다른 브라우저에서 어떻게됩니까? 그리고 사용자가 페이지를 '확대'할 때 어떤 일이 발생합니까? – Benjol

+0

메인 div에 표시된 내용은 모두 분리 된 조각으로 잘라집니다. – rahul