2009-08-14 8 views
0

여러 개의 데이터 덩어리를 나란히 표시하려고합니다. 인라인을 표시하도록 컨테이너를 설정 했으므로 열이 비교적 얇은 경우에 효과적입니다. 한 열이 가로 화면 길이를 초과하면 다른 열은 아래쪽에 추가됩니다.HTML 조각, 열, 가로 스크롤 막대

제 질문은 : 수평 스크롤 막대를 사용하여 가로로 배치 된 인라인 열 div를 표시하는 방법은 무엇입니까?

참고 : 실제로 스크롤 막대가 필요합니다. 요소를 나란히 배치하고 싶습니다.

<div class="container"> 
    <div class="child" id="1">Stuff</div> 
    <div class="child" id="2">Stuff</div> 
</div> 

--------- 

.child { 
    /*float:left; 
    margin-right:5em;*/ 
    display:inline; 
} 
.container { 
    display:inline; 
    overflow: scroll-x; 
    white-space: nowrap; 

} 

감사합니다,
마이클

답변

2

우리는 그 일에서 브라우저를 유지하기 위해 노력하고 정상적인 일이다 : 같은에 물건을하고 설계 현재 윈도우 크기에 맞도록 물건이 블록이나 인라인이라면 상관 없습니다. 그래도 브라우저는 창 안쪽에 그것을 넣으려고합니다.

당신은 모든 열에 대한 충분한 공간을 확인하기 위해 용기 고정 폭을 제공 할 수 있습니다 :

.child { 
    margin-right:50px; 
    float:left; 
    width: 100px; 
    border: 1px black solid; 

} 

.container { 
    width: 1520px; 
    overflow: scroll-x; 
    border: 1px red solid; 
} 

example page

screenshot of the example page http://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

0

나는 그냥 overflow-x: scroll; 대신

수 있습니다 혼란이 올 생각은
+0

@Kilrizzy은 - 모두 시도 – Dirk