동적 높이 후의 플로트

Question

너비가 100 % 인 JQuery 이미지 페이더가 있습니다. 높이 : 자동;

이것은 아이폰에서도 작동하기 때문에 멋지다.

이제는 JQuery 슬라이더 다음에 내용을 "플로팅"하고 싶습니다. 높이 자동을 사용하기 때문에 100 % 와이드 이미지로 올바른 비율을 얻으려고 정말 문제가 있습니다.

나는 시도했다 : overflow : hidden, auto and clear : both; width : 100 % 다음 요소에서, 또한 두 요소를 부동 시도했지만 정의 된 높이없이 작동하지 않습니다. 높이를 정의하면 작동하지만 .. 동적으로 높이를 원합니다.

CSS로 수행 할 수 있습니까, 아니면 JS를 사용해야합니까?

다음 사이트는 www.magento-design.dk입니다 (기초가있는 Joomla). JQuery 슬라이더 다음에 기초 데모 내용을 떠올리게하고 싶습니다.

Answer 1

높이를 특정 값으로 설정 한 다음 내용이 변경되면 JavaScript를 통해 변경하는 것이 좋습니다. 자동 CSS 높이에는 픽셀 값이 설정되어 있지 않으므로 JavaScript를 통해 높이를 정의해야합니다.

$ (document) .ready() 및 콘텐츠 변경 호출에서 호출 할 수있는 JavaScript의 함수로 변경하는 높이를 설정하십시오.

편집 1 :

나는 나이를 기록 할

물론

jQuery(document).ready({ 
    set_img_height(); 
}); 

jQuery("#contentDIV").load("data.html", function() { 
    set_img_height(); 
}); 

function set_img_height() { 
    var height = jQuery('#slideshow').height(); 
    jQuery('.imagefade').css('height', height); 
} 

이 조금 어렵습니다 ... 당신이 찾고있는 무슨을 달성하기 위해 다음 코드를 사용합니다 더 구체적으로 당신이 찾고있는 것을 알지 못합니다. 그러나 기본 개념은 다음과 같다 :

1. 당신은 슬라이드 쇼의 높이를 얻을 "imagefade"의 클래스와 모든 요소의 높이가
이
2. 다음이 함수를 호출 있는지 확인하는 함수를 만들 문서 준비 함수 (PHP가 처리되고 HTML이 완전히로드 된 경우)
3. 마지막으로 콜백 함수를 사용하여 정보를로드하면이 함수가 다시 호출됩니다. 어떻게 콘텐츠를로드하는지 모르겠다.하지만 기본적으로 "data.html"파일을 "contentDIV"라는 ID로 div에로드하는 것으로 가정하고,이 작업이 끝나면 정의 된 set_img_height 함수를 호출합니다. 그 아래에.

이 코드는 복사하여 붙여 넣는 것이 아니라 실제 코드를 직접 제출하지 않았으므로 가능한 최선의 방법입니다. 바라기를 이것은 적어도 당신을 올바른 방향으로 향하게 할 것입니다!