왼쪽 div의 높이를 기준으로 오른쪽 div 반복 배경 만들기

Question

두 개의 div가 컨테이너 div에 있고, 하나는 왼쪽으로 떠 있고 하나는 오른쪽으로 떠있는 것입니다. 왼쪽 div에 결과가 나오는 검색 엔진을위한 php 함수가 있습니다. 내가해야 할 일은 왼쪽 div에 다양한 결과의 높이를 바탕으로 오른쪽 div가 배경을 반복하도록하는 것입니다. 나는이 아이디어에 대해 어떻게 생각하는지 모른다.

왼쪽 사업부의 콘텐츠를 잘 DIV 배경
왼쪽 사업부의 콘텐츠를 잘 DIV 배경
왼쪽 사업부의 콘텐츠를 잘 DIV 배경
왼쪽 DIV 내용
왼쪽 DIV 내용

:

는 지금 당장은 다음과 같습니다

내가해야 할 일은 왼쪽 div에있는 콘텐츠의 반복 반복을 기본으로하므로 이렇게 보입니다.

왼쪽 DIV의 컨텐츠 바로 DIV 배경
왼쪽 사업부의 콘텐츠를 잘 DIV 배경
왼쪽 사업부의 콘텐츠를 잘 DIV 배경
왼쪽 사업부의 콘텐츠를 잘 DIV 배경
왼쪽 사업부의 콘텐츠를 잘 DIV 배경
왼쪽 사업부의 콘텐츠를 잘 DIV 배경

편집 : 내가 지금 생각할 수있는 유일한 해결책은 왼쪽 div의 모든 링크에 대해 오른쪽 div에 빈 줄을 뱉어 내 피하고 싶습니다. 그 이유는 다른 이유를 묻는 것입니다. 해결책.

EDIT 2 : javascript를 통해 다른 방법을 생각해보세요. div가 페이지에로드 된 후 높이를 감지하고 왼쪽의 높이를 오른쪽으로 다시 지정하십시오. 내가 피하고 싶지만 나중에 할 수있는 일.

Answer 1

순수한 CSS 솔루션으로 faux columns을 사용할 수 있습니다. 기본적으로 부모의 배경 반복을 사용하여 div 높이를 마스크하는 것을 의미합니다. 못생긴 해킹이지만 대부분의 시나리오에서 놀라 울 정도로 잘 작동합니다.

또는 당신은 자바 스크립트 사용할 수 있습니다

건이다

var box1 = document.getElementById('left-div'); 
var box2 = document.getElementById('right-div'); 
var height = box1.offsetHeight; 
if(box1.offsetHeight < box2.offsetHeight) height = box2.offsetHeight; 
box1.style.height = box2.style.height = String(height) + 'px'; 

Answer 2

오른쪽 div 높이를 왼쪽 div와 동일하게 설정하십시오.