HTML 및 CSS..adding 된 div 측

Question

나는 다음과 같은 레이아웃

와 HTML/CSS 레이아웃을 구축 할 필요가

| 정적 사업부 | 내용 Div0을 | 내용 Div1이 | ... | 내용 DivN | 정적에게 Div |

<div id="container"> 
    <div id="static_div_1"></div> 
    <div id="content"> 
     <div id="item1"></div> 
     <div id="item2"></div> 
     .... 
     <div id="itemN"></div> 
    </div> 
    <div id="static_div_2"></div> 
</div> 

요구 사항 :

1. 모든 된 DIV 서로 옆에 적재 할 필요를 다음과 같이

   내 코드의 축소 버전입니다.

2. javascript를 사용하여 DIV를 동적으로 DIV에 추가해야합니다.
3. 정적 DIV는 콘텐츠의 시작과 끝 부분에서 위치를 유지해야합니다.
4. 내용 DIV 나는 다음과 같은 문제로 고민하고 수평입니다

스크롤해야합니다

1. 점 후 컨텐츠 사업부가 삽입 된 DIV와는 div 다른 행이 렌더링되기 시작 포장을 시작합니다.

편집 : 일반 데이터처럼 본질적으로 표 형식이 아닙니다. 각 div가 그 자체로 하나의 양식과 같다고 가정합니다. W2처럼 보이는 것. 콘텐츠 DIV에서 스크롤 만하면됩니다. . 내가 정말 GUI 사람 아니에요 악화 문제를하려면 .. :(

어떤 도움이 크게 감사합니다

Answer 1

당신이 필요 CSS 코드하는 것은 이것이다 :

#static_div_1, #static_div_2 { 
    float: left; 
    width: 200px; 
    } 
    #content { 
    float: left; 
    overflow-x: scroll; 
    white-space: nowrap; 
    width: 600px; 
    } 
    #content .item { 
    display: inline-block; 
    *display: inline; /* Target IE6/7 only */ 
    width: 150px; 
    zoom: 1; 
    } 

참고 내가 추가 한 . #content div의 내부의 각 항목에 대한 클래스 "항목"을 스타일이 레이아웃의 키는 다음과 같습니다

1. 만들기 : 세 부분, #의 static_div_1, #의 static_div_2와 #을 "부동 소수점 왼쪽" 콘텐츠 div (선택적으로 고정 너비).
2. #content div에 'overflow-x : scroll'스타일이 있습니다.
3. #content div에 대한 "white-space : nowrap".
4. #content div의 각 항목에 'display : inline-block'을 설정합니다.

각 항목 사이에 공백이 있음을 알 수 있습니다. 이것은 줄 바꿈 공간이므로이를 피하기 위해 항목 div 사이에 줄 바꿈 또는 공백이 없어야합니다.

이 결과가 도움이되기를 바랍니다. 감사합니다.

업데이트 : 이제 IE6/7에서 작동합니다. 이 브라우저에서 "display : inline-block"을 올바르게 설정하려면 다음 줄을 추가하십시오.

... 
#content .item { 
    ... 
    *display: inline; /* Target IE6/7 only */ 
    ... 
    zoom: 1; 
    }