CSS 100 % divs 나란히, 가로 흐름

Question

나는 한 단계 (총 4 단계) 체크 아웃을 시도하고있다. 나는 수평 슬라이더 설정의 종류를 가지고 있다고 생각했다.

4 개의 컨테이너를 포함하는 너비가 400 % 인 컨테이너를 만들었습니다. 이 컨테이너들은 나란히 있어야하며 윈도우의 100 %를 채워야합니다. 이것은 수평 슬라이더의 일종이지만 양식으로 사용하고 싶습니다.

[[[컨테이너 1] [컨테이너 2] [컨테이너 3] [컨테이너 4]]]

내 HTML :

<div class="container fullWidth"> 

     <div id="checkoutContainer"> 

      <div class="checkout" id="cart">Cart</div> 
      <div class="checkout" id="contact">Contact</div> 
      <div class="checkout" id="address">Addresse</div> 
      <div class="checkout" id="overview">Übersicht</div> 
      <div class="checkout" id="thankyou">Danke</div> 

     </div> 

    </div> 

내 CSS :

.container.fullWidth { 
    width : 100%; 
    overflow-x: hidden; 
} 

div#checkoutContainer { 
    background-image: url(../img/background.jpg); 
    background-repeat : repeat-x; 
    width : 500%; 
    height : 657px; 
} 

div#checkoutContainer div.checkout { 
    float : left; 
    width : 900px; 
    height : 657px; 
} 

질문 지금은 : 어떻게 든 단일 div div 자바 스크립트를 사용하지 않고 페이지의 너비를 채울 수 있습니다 (나는 페이지 너비를 감지하고 너비를 설정할 수 있습니다) 알아? div.checkout { width : 100% } 설정은 서로 겹치기 때문에 작동하지 않습니다.

Answer 1

빠른 예 : http://jsfiddle.net/DTTnB/

당신은 내가 그렇게 당신은 그들이 수평 거짓말 것을 볼 수 있습니다 overflow-x: hidden을했다

을 할 방법이 미세 조정할 수 있습니다. 당신은 바로 트랙에

키 차이가 있었다 :

나는 용기 자신의 포장 용기의 비율을 각각 제작 :

.checkout : 내가 만든 width : 20%;

그들의 포장 용기 각 컨테이너가 적어도 페이지 폭을 차지하도록 모든 컨테이너를 수용 할만큼 충분히 넓습니다.

checkoutContainer :

width : 1000%; 당신이 div의 그렇게 '미세 조정'을 필요,이 반응하지 않으며의 수에 의존하지 플러스 컨테이너를 채울 것, 밖으로 조정이

Answer 2

확인 my approach 미세 수 있습니다 div의

HTML

<div id="checkoutContainer"> 
    <div class="checkout" id="cart">Cart</div> 
    <div class="checkout" id="contact">Contact</div> 
    <div class="checkout" id="address">Addresse</div> 
    <div class="checkout" id="overview">Übersicht</div> 
    <div class="checkout" id="thankyou">Danke</div> 
</div> 

CSS

#checkoutContainer { 
    overflow: hidden; 
    white-space: nowrap; 
    width: 100%; 
} 
.checkout { 
    display:inline-block; 
    width : 100%; 
    height : 200px; 
    vertical-align: top; 
} 

See working example