div 아래에있는 이미지 테이블

Question

"jaipho"라고 불리는 iPhone에서 사진을 표시하기위한 멋진 자바 스크립트 라이브러리가 있습니다. 나는 정상적인 브라우저에서 작동하도록 슬라이더 구현을 적용하려고 노력 중이며 몇 가지 문제가 있습니다.

다음은 슬라이더의 작동 방식을 요약 한 것입니다. 수평으로 정렬 된 이미지 테이블이 있습니다. 테이블은 오버플로가있는 div에 포함되어 있습니다 : 숨겨진 다음 일부 자바 스크립트는 marginLeft를 음수로 설정하여 테이블을 이동합니다.

더 구체적으로 : 테이블은 자바 스크립트로 innerHTML을 설정하여 div 안에 배치됩니다. 각 테이블 셀은 CSS에 의해 iPhone의 너비로 설정되는 "slide"클래스입니다. 사진은 appendChild를 호출하여 표 셀에 동적으로 배치되므로 한 번에 모두로드 할 필요는 없습니다.

MobileSafari의 iPhone에서 잘 작동합니다. 사진을 가로로 배열하면보기가 왼쪽에서 벗어나고 다음 사진은 오른쪽에서 미끄러 져 움직일 수 있습니다.

이제 브라우저 창에서 Mac에서 작동 시키려고합니다. 문제는 각 셀에 대해 일정한 너비를 얻는 것입니다. 원하는 너비는 iPhone과 같은 고정 너비가 아닌 window.innerWidth이므로 CSS를 사용할 수 없습니다. 윈도우의 너비에 "너비"태그 (또는 "스타일"태그)를 사용하여 표 셀을 설정해 보았습니다. Javascript Console에서 Chrome이 생각하는 것을 살펴보면 마치 테이블이 셀의 너비를 설정하는 노력을 무시하는 것과 같습니다. 오히려 테이블은 너비를 매우 좁게 설정하여 내부에 완전히 들어갈 수 있습니다. 창문. (또는 포함 된 div로, 비록 그것이 "overflow : hidden"으로 설정되어있다.)

누구나 작은 부분 만하더라도 테이블을 매우 광범위하게 강요하는 방법에 대한 제안이 있습니다. 한번에 언제나 보여 주나요?

감사합니다,

데이브

내가 최근에 이런 식으로 뭔가를 구축하고, 여기에 구조

Answer 1

:

<div id="outer_container" style="width: 500px; height: 100%; position: relative; overflow: hidden"> 
    <div id="slider" style="width: 5000px;"> 
     <div id="slide1" style="float: left; width: 500px;">...</div> 
     <div id="slide2" style="float: left; width: 500px;">...</div> 
     <div id="slide3" style="float: left; width: 500px;">...</div> 
     <!-- add as many as you want, just make sure it fits in the 5000px width above --> 
     <div style="clear: both;"><div> 
    </div> 
</div> 

다음

하여 '슬라이더의 CSS left 속성을 조정하여 슬라이더 작품 'div. 따라서 기본적으로보기 창은 각 슬라이드의 너비와 500 픽셀입니다. 각 슬라이드의 키는 float: left입니다.

내가 적절한 폭을 취할 세포를 얻기 위해 this site

Answer 2

에 코딩 오른쪽 열에서 상위 섹션을 확인, 행동이 사업부 구조를 확인하려면 다음 테이블 폭을 조정해야 모든 세포를 수용 할 수 있습니다. 이 바이올린을보세요 : http://jsfiddle.net/USRww/1/. 각 셀이 브라우저 창의 너비의 100 %가 될 것이라고 가정하고 모든 셀을 수용 할 수 있도록 표의 크기를 조정합니다. 나는 비율을 사용하고 있으므로 모든 것이 유동적입니다.

그 마크 업은 제안한대로 표를 사용하고 있지만 컨테이너 div를 각 셀에 떠 다니는 div로 묶어 사용하는 것이 좋습니다.