HTML, CSS, jQuery - 다른 열에있는 div의 높이에 따라 한 열에 divs의 높이

다음과 같은 문제가 있습니다. 다음은 HTML 코드의 예입니다.HTML, CSS, jQuery - 다른 열에있는 div의 높이에 따라 한 열에 divs의 높이

<html> 
<body> 
<div id="leftColumn"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 
    <div id="div4"></div> 
</div> 
<div id="rightColumn"> 
    <div id="div1sidebar"></div> 
    <div id="div2sidebar"></div> 
    <div id="div3sidebar"></div> 
    <div id="div4sidebar"></div> 
</div>  
</body> 
</html>

Now - 왼쪽 열에있는 div의 높이는 내용에 따라 다릅니다. 오른쪽 열의 div가 왼쪽 열의 div와 동일한 높이가되도록하십시오. "div1sidebar"의 높이는 "div1", "div2sidebar"는 "div2"등에 따라 다릅니다.

방법은 CSS로 그것을 달성하기 위해? 또는 예를 들어 jQuery로? "Faux columns"방법 (http://www.alistapart.com/articles/fauxcolumns/)은 부모의 배경이 아니기 때문에 선택 사항이 아니라 div 자체의 높이입니다.

편집 : 왼쪽 열에있는 div의 높이가 사이트를 다시로드하지 않고 "즉시"로 변경됩니다.

출처

2011-11-07 Irminsul

당신은 float 당신의 요소는 좌 · 우 및 사용은 그들이 여기처럼 정렬 얻을 clear: both을 반복 할 수 있습니다 http://jsfiddle.net/eNRhQ/2/

이 해당 div의 항상 정렬되는 것을 보장,하지만 당신은 국경에서 볼 수 있듯이, 자신의 높이는 실제로 같지 않습니다. 당신이 정말로 프로그래밍 방식 된 div를 정렬하려면

, 당신이 jQuery를이처럼 그것을 할 수 있습니다 (당신은 ... 스타일링 목적으로 만 가능합니다 필요성이 수) :

var left = $('#left-element'); 
var right = $('#right-element'); 

var maxHeight = Math.max(left.height(), right.height()); 

left.height(maxHeight); 
right.height(maxHeight);

그러나 나는 확실히 만들 것 페이지도 자바 없이도 괜찮아 보인다.

출처

2011-11-07 18:06:25 wutz

흠, 주셔서 감사합니다 도움이 되겠지만 jsfiddle 예제에서 html은 약간 다릅니다.이 방법으로 변경할 수는 없습니다. 내 경우에는 모든 왼쪽 div가 하나의 왼쪽 열에 있어야하고 모든 오른쪽 div는 오른쪽 열에 있어야합니다. 하지만 어쨌든, 나는 다음과 같이했다 : '$ ("# div1sidebar") .css ({높이 : $ ("# div1"). 높이()}); ' 동적 크기 조정에는 여전히 문제가 있습니다. 왜이 코드가 작동하지 않습니까? - '$ ("#의 div1")의 크기를 조정 (기능() { \t \t \t $ ("#의 div1sidebar") CSS ({높이 :... $ ("#의 div1") 높이()}); \t \t}); ' – Irminsul

이것은 CSS에서 할 수없는 이상한 것들 중 하나이다.

당신이 할 수있는, http://www.cssnewbie.com/equalheights-jquery-plugin/

이이 크기를 조정 한 후 최신 상태로 유지하려는 경우,이 플러그인을 사용하고 잘 작동 : 대한

$(".columns").resize(function(){ 
    $(".columns").equalHeights(); 
});

http://api.jquery.com/resize/

출처

2011-11-07 19:05:49 CambridgeMike

유망 해 보입니다. 말해봐 - 한 div의 동적 크기 조정과 함께 사용하는 방법이 있습니까? – Irminsul

그래, 그냥 크기 조정 핸들러에서 호출 할 수 있습니다. 편집보기 – CambridgeMike

그것이 작동하지 않을까 걱정됩니다. 크기 조정 div는 어쨌든 높이를 변경하지 않습니다. – Irminsul

HTML, CSS, jQuery - 다른 열에있는 div의 높이에 따라 한 열에 divs의 높이

답변

관련 문제