섹션 수가 알려지지 않은 페이지를 가로로 스크롤하는 방법은 무엇입니까?

Question

가로로 배치해야하는 몇 가지 <section>이 포함 된 웹 페이지가 있습니다. 모두 화면 너비의 85 %이며 양면에 자동 여백이 있습니다. 문제는 어떤 이유로 섹션이 float:left을 무시하는 것 같습니다. 동일한 CSS가 여러 페이지에서 사용되므로 본문에서 고정 폭을 설정하지 않으려합니다. 이것이 할 수있는 방법이 있습니까?

Here's a jsbin of the code. 나는 또한 display:box으로 이것을 시도했다.

Answer 1

JS를 사용하여 컨테이너의 "크기를 조정"할 수 있습니다. 여기에 간단한 예입니다

<div id="container"> 
    <div class="section"></div> 
    <div class="section"></div> 
    <div class="section"></div> 
    <div class="section"></div> 
</div> 

무엇 당신이 할 것은 (추가 포장에 대한 컨테이너 overflow:hidden;zoom:1 추가) float:left 모든 섹션입니다. 꽤 쉽습니다. 그러나 컨테이너의 너비에 의해 제약을받습니다 (또는 직접 신체의 어린이 인 경우 html body으로 제한됩니다).

여기에서 JS를 사용하여 트릭을 수행합니다. 나는 jQuery를 선호한다. (사람들은 순수한 JS를 사용하지 않는 것에 대해 비판 할 수도있다. 당신이하는 일은 섹션의 "너비"(즉, 너비, 패딩, 테두리 및 여백 포함)를 얻고 섹션 수를 곱한 다음이를 직접 부모 또는 컨테이너에 적용하는 것입니다. 귀하의 수평 항목을 제한하고 있습니다).

섹션의 부모가 명시적인 너비를 가지므로 브라우저가이를 적합하게 만들어 수평 적으로 스크롤 할 수 있습니다. 또한 컨테이너를 섹션에 맞추십시오.

이러한 방법은 현재 외장 용기에 대한 소정 폭 JS "슬라이더"그래피 (900px처럼)을 수행하지만, 3 개 섹션 (2700px)처럼 갖는 내부 용기가된다. 이것에 외부 컨테이너에 overflow:scroll을 추가하면 그 안에있는 모든 것이 "가로로 스크롤 가능"이됩니다.