유체 레이아웃 - 텍스트 오버 플로우에서 Jquery와 동일한 높이의 열을 사용하려고합니다. : (

Question

저는 많은 좋은 CSS 등을 알고 있습니다. 짧게 말하면, 패딩, 여백, 여분의 마크 업, 그림자, 배경색 등이 있으면이 기능이 필요합니다. .. 그냥 jquery 버전을 찾고 있어요.

적용하려고 시도 중입니다. 거의 작동하고있는 것으로 보입니다. 창을 좁히면 텍스트가 겹칩니다. js를 비활성화하면 ' . t

http://jsfiddle.net/ApUYv/4/

두 질문 : 우리가 일을 피할 수있는 방법

1) 겹쳐지는 텍스트?

2) document.ready 또는 window.load를 사용해야합니까?

디자이너가 스크롤 막대를 원하지 않으므로 overflow: auto;은 옵션이 아닐 수 있습니다. : (

Answer 1

확실한지, 이것이 무엇인지 찾고 있습니다. 하지만 창 크기 조정에 열 높이 다시 조정하여 자바 스크립트 코드 변경 : 창 크기를 조정 열 크기를 조정하려면 http://jsfiddle.net/ApUYv/6/

function resetHeight() { 
    var maxHeight = 0; 
    $(".equal-height").height("auto").each(function(){ 
     maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
    }).height(maxHeight); 
} 
resetHeight(); 
// reset height on resize of the window: 
$(window).resize(function() { 
    resetHeight(); 
}); 

을, 당신은 $(window).resize()에 콜백을 사용하려면, 그 때문에 나는 당신을 캡슐화 한 코드를 함수 resetHeight에 넣습니다.

그러면이 함수를 호출 할 때마다 maxHeight를 다시 계산하고 올바르게 수행하려면 각 div의 높이를 auto으로 일시적으로 재설정해야 이전 설정으로 인해 .each() 루프. 또한 이전 값이 계속 남아 있기 때문에 항상 maxheight을 0으로 재설정해야합니다.

원하는 것을 원하십니까?

Answer 2

1) 매우 작은 크기로 크기를 조정하지 않으면 중복되지 않습니다. 매우 작은 화면 (예 : 모바일)의 경우 display:block;에 media query을 추가하면 열이 행으로 바뀝니다.

확인 작업이 미디어 쿼리와 코드의 updated fiddle :

$(document).on('load resize',function(){ 
    /* do the resizing stuff */ 
}); 

:

또한

@media only screen and (max-width:400px /*change it to your needs*/) { 
    #one, #two, #three, #four { 
     float:none; display:block; width:100%; margin:1% 0; height:auto !important; 
    } 
}​ 

, 창 크기를 조정할 때 중복에서 텍스트를 방지하기 위해,로 jQuery를 기능을 포장 2) $(window).load은 페이지의 모든 요소 (내부 및 외부)가로드 될 때까지 대기하므로 일반적으로 $(document).ready이 바람직하지만 특정 ca se.