만들기가

Question

내가 화면

다음 확인하려면 내부 현명한 컬럼으로 많은 사업부를 가지고 사업부 스크롤

HTML 코드를 외부 DIV 컬럼과 컬럼의 폭과 많은 사업부를 포함

<div class="outerDiv"> 

    <div class="column"> 

      <div class="row columnName">Column Name 1</div> 

      <div class="row value">Value 1</div> 

      <div class="row value">Value 2</div> 

      <div class="row value">Value 3</div> 

      <div class="row value">Value 4</div> 

    </div> 

    <div class="column"> 
      <div class="row columnName">Column Name 2</div> 

      <div class="row value">Value 1</div> 

      <div class="row value">Value 2</div> 

    </div> 
</div> 

고정되지만 열의 높이는 해당 열 div의 포함에 따라 달라집니다.

외부 div 스크롤 가능을 원합니다. 그것은 어떤 컬럼의 높이가 외부 DIV

에서 내가

.outerDiv{ 
width:100%; 
height:100%; 
overflow:auto; 
} 
.column{ 
width:20%; 
height:100%; 
float:left; 
display:inline; 
margin-right:10px; 
} 
.row{ 
width:100%; 
height:10%; 
} 
.value{ 
font-size:18px; 
} 

그래서

문제 CSS

다음 구현을 갈 경우, 열 DIV 내려 오는보고 다른 모든 열을 볼 수직으로 스크롤 수평으로 스크롤할지, 외부 div가 가로로 스크롤되지 않고 세로선 스크롤이 제대로 작동합니다. 그렇지 않으면 http://jsfiddle.net/Raj_13290/LG8j9/3/

Answer 1

당신은 한 줄에 열 이름을 표시 .outerDiv에 열 나란히하고 white-space: nowrap;을 표시 한 .column CSS 클래스에 display:table-cell을 사용할 수 있습니다

(: 하루 종일 내가 시도 :(

JS의 피들러를 도와주세요 이들은 말)로 파지한다

.outerDiv{ 
    overflow:auto; 
    white-space: nowrap; 

} 
.column{ 
    width:20%; 
    height:100%; 
    display:table-cell; 
    padding:0 10px 0 0; 
} 

Example

Answer 2

변경 폭 값 outerDiv 클래스 고정 값으로 witdh :. 1천% 오 r 너비 : 3000px; witdh 값은 화면의 너비보다 커야합니다.