CSS 가로 스크롤, 세로 스트레치가 가능합니까?

Question

저는 근로자를위한 경로 목록을 만들고 있습니다. 각 근로자는 하나의 경로를 가지고 있으며 경로 내에는 많은 수의 작업 지시가 있습니다. 단일 경로에서 1-10 개의 경로 (1-10 명의 근로자에 ​​해당)와 최대 100 개의 작업 지시가있을 수 있습니다.

각 작업 주문 목록은 sortable 목록이 divs입니다. 작업 지시는 경로 내에서 재배치되거나 다른 경로로 드래그 될 수 있습니다. 내가 가진 것은 모두 자식 경로 인 부모 div입니다. 부모 div이 경로 divs 만 가로로 표시되도록 허용하고 싶습니다. 6 개 이상의 경로를 클릭하면 부모 창이 가로로 스크롤되고 두 번째 행의 작업 주문이 허용되지 않습니다.

그것은이 (작업 순서를 나타내는 R과 = 경로 *)과 같아야합니다

R R R R R 
* * * * * 
* * * * * 
* *  * * 
* *  * 
* * 
    * 
    * 

것은 그것은 이 같은하지 모습한다 :

R R R 
* * * 
* * * 
* * 
* *  
* * 
    * 
    * 
R R 
* * 
* * 
* * 
* 

그래서, 경로가 있어야한다 페이지에 너무 많이 들어가면 스크롤바가 나타나 가로로 표시됩니다. 그러나 이러한 경로가 포함 된 상위 div은 수직으로 성장하여 많은 작업 지시가있는 긴 경로를 허용 할 수 있습니다.

부모에게 다양한 CSS 스타일을 추가하려고 시도했습니다. div 모두 사용할 수 없습니다. 가장 가까운 것은 max-height을 가로 스크롤을 수행하는 부모 div로 설정하는 것이 었습니다. 그러나 너무 길면 경로가 수직으로 절단됩니다.

아이디어가 있으십니까?

Answer 1

CSS-Tricks mentions과 같이 가장 좋은 방법은 표를 사용하는 것입니다. 이 바이올린 예를 체크 아웃 :

http://jsfiddle.net/jyz3m7cx/1/

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

이하는 것도 아마 테이블 셀에 더 좋을 것이다 데이터를 구성하는 데 도움이됩니다. 테이블은 나쁜 랩을 얻지 만 확실히 사용합니다.

내가 추천하지 않는 다른 옵션은 내부 컨테이너의 너비를 설정하는 것입니다. 폭이 바뀌면 성가 시겠지만 jQuery를 사용하여 설정할 수 있습니다. 그것은 가치가있는 것보다 더 많은 일이 될 것입니다.