2011-09-21 2 views
2

내 프로젝트에서 너비가 브라우저 창을 넘치면 줄 바꿈없이 알 수없는 (무제한) 너비가 있어야하는 컨테이너 div를 구현해야합니다.Div 넓이는 무제한입니까? 가능한가?

컨테이너 div에는 (white-space : nowrap; display : inline)의 CSS 속성이 있고이 div의 구성 요소에는 (float : left) CSS 속성이 있습니다. 모든 폭은 정적으로 설정됩니다. 비헤이비어를 테스트하기 위해 컨테이너 div 안에 컴포넌트를 추가하는 자바 스크립트 함수를 호출하는 버튼을 사용했습니다.

문제는 컨테이너 div의 전체 너비가 브라우저의 창 너비보다 커지면 컨테이너 div 안의 구성 요소가 새 줄로 나뉘는 문제입니다. 무제한의 폭을 가진 div를 가질 수 있는지 궁금합니다.

많은 감사 ..

답변

4

white-space: nowrap 속성 은 부동 요소에는 적용되지 않습니다. 간단히 말해, 요소를 왼쪽 또는 오른쪽으로 떠있을 때 사이에는 공백이 없습니다..

공백에 대한 자세한 내용과 부동 소수점으로이 작업을 수행 할 수 없다고 명시된 줄에 대해서는 white-space (CSS property)을 참조하십시오.

부모가 실제로 내용으로 간주하도록 display: inline-block으로 설정해보십시오.

+0

나는 white-space 속성이 작동한다는 것을 알았다. 텍스트 (나는 맞습니까?) ... 그래서, 내 문제에 대한 제안이 있습니까? 컨테이너 div의 너비가 브라우저 창을 통해 오버플로되는 경우에도 줄 바꿈을 방지하는 방법은 무엇입니까? 감사합니다 .. – Abou

+0

@Abou :'display : inline-block'을 대신 사용하는 방법에 대해서는 [this example] (http://jsfiddle.net/sT2DV/)를보십시오. 걱정해야 할 것은 각 요소 사이에 줄 바꿈과 공백이 없어서 초과 된 공간이 나타나지 않도록하는 것입니다. – animuson

+0

줄 바꿈 및 공백없이 [다른 예] (http://jsfiddle.net/sT2DV/1/)가 있습니다. – animuson

0

시도 컨테이너 DIV에 특정 높이를 추가하거나 사업부 내부의 구성 요소에서 float: left 규칙을 제거.

+0

div의 높이를 특별히 설정했지만 여전히 작동하지 않습니다. 그리고 플로트 : 왼쪽, 나는 그렇게 생각해야한다, 컨테이너 안의 div는 한 줄로 흐르지 않을 것이다. IMHO .. – Abou