2008-11-11 2 views
12

페이지의 IMG 태그를 기반으로 CSS 스프라이트를 자동으로 생성하고 적절한 부분을 보여줄 배경으로 스프라이트 이미지를 배치하기 위해 적절한 CSS로 DIV를 대체하는 코드를 작성했습니다. 문제는 DIV가 IMG의 대체품으로 작동하지 못하게한다는 것입니다.DIV를 CSS 스프라이트로 사용하기 위해 IMG처럼 동작하게하려면 어떻게해야합니까?

기본값 인 'display'값을 'block'으로 설정하면 원래 IMG가 텍스트의 끝에 위치하면 대체 DIV가 텍스트 다음 줄로 건너 뜁니다. display : 블록을 사용하여 무언가를 기대합니다).

'display'를 인라인으로 변경하면 DIV는 텍스트와 동일한 줄에 있지만 '너비'와 '높이'를 무시하고 설정하고 접습니다. 나는  을 DIV 안에 넣어 봤지만 nbsp를 포함 할만큼의 너비 만 차지합니다.

나는 'table-row', 'run-in', 'compact'등과 같은 "희미한"값을 포함하여 가능한 모든 값을 표시하는 실험을 해봤지만 운이 전혀 없습니다. IMG와 동일한 레이아웃 동작으로 DIV를 만들 수 있습니까?

나는 하나의 DIV보다 복잡한 것을 가지고있다. 그러나 나는 거기에 명백한 것을 시도했다. (하나의 DIV는 내부 DIV가 표시되도록 설정되어있다 : 표시 할 외부 세트를 가진 블록 : 인라인) 그러나 나는 거기에서 조합을 발견하지 못했다.

내가 원하는 레이아웃을 얻기 위해 대체 된 IMG/DIV 외부에서 수행 할 수있는 특정 작업이 있지만 내 목표는 나머지 HTML과 상관없이 작동하는 일반적인 자동 CSS 스프라이트 메커니즘을 사용하는 것입니다.

답변

13

당신은 display: inline-block;을 시도 했습니까?

당신은 또한 firefox2에 대한 display: -moz-inline-block;를 사용 할 수 있습니다

+0

빠른 것이 었습니다! –

1

표시 :이 상황에서 인라인 블록이 작동해야합니다. 너 해봤 니?

+0

나는 우리에게했다 표시 : -moz - 인라인 블록; 디스플레이 : 인라인 블록; 두 브라우저 모두에서 작동하려면이 방법이 필요했습니다. – John

4

이미지에는 "display : inline-block"과 동일한 기능이 있습니다. 이것은 원래 CSS에 포함되지 않았지만 이미지가 이러한 방식으로 작동한다는 사실을 해결하기 위해 부분적으로 추가되었습니다.

문제는 모든 브라우저가 이제 막 지원하고 있다는 것입니다. 심지어 1 년 전부터 브라우저를 지원하고 싶다면, 당신은 붙어 있습니다.

다른 해결책은 div ("float : left") 부동입니다.

인라인 블록 : CSS 2.1에 추가되었습니다. 이렇게하면 요소가 주변 내용과 함께 단일 인라인 상자처럼 흐리게 될 블록 요소 상자가 생성됩니다 (대체 요소 [이미지 의미]와 비슷하게 동작 함).).

Source Mozilla Developer Center

관련 문제