문제

http://biochrom.fivesite.co.uk/catalogue4.asp

위의 페이지에는 왼쪽에 떠 다니는 이미지가 있습니다. 오른쪽에는 "기능"이라는 제목의 목록이 있습니다. 목록 항목에는 배경 이미지가 있지만 나타나지 않습니다. List 2는 배경 이미지가 어떻게 보이는지 보여줍니다.

총알을 어떻게 보이게 할 수 있는지 아는 사람이 있습니까?

도움이 되었습니까?

해결책

이미지에는 플로트가 있습니다 : 왼쪽 속성. 따라서 목록 항목은 이미지 뒤에 "뒤에"렌더링됩니다.

margin-left:200px;

UL 요소에서 문제가 해결됩니다.

또는 Ul-Element에 Float : Left를 적용 할 수 있습니다. 이렇게하면 이미지로 바로 떠 다니지 만 다음 컨텐츠가 같은 줄에 나타납니다. 당신은 이것을 방해 할 수 있습니다 Ul-Element를 청소합니다, UL- 요소 후 요소 추가 ...

clear:both

... 적용.

이 행동에 대한 자세한 내용은 다음에서 확인할 수 있습니다 http://www.positioniseverything.net/easyclearing.html.

다른 팁

나는 이것이 1 년 된 게시물이라는 것을 알고 있지만 다른 사람들은 알고 싶어 할 수도 있습니다 ...

컨텐츠 관리 시스템을 사용하고 일부 페이지가 이미지가 있고 일부 페이지는 컨텐츠에서 목록 항목이 200px가되기를 원하지 않으면 어떻게됩니까?

이 CSS를 UL/OL 요소에 추가 할 수 있습니다.

overflow:hidden;

도움이되기를 바랍니다.

이 스레드는 실제로 오래되었지만 항상 관련이 있습니다 ...

또 다른 대안 솔루션 :

display: inline-block;

이것을 넣으십시오 UL에서. 플로트 후에 전체 UL이 나타납니다. 이렇게하면 이미지가 있거나없는 페이지를 가질 수 있으며 항상 올바르게 표시됩니다 (FF4, IE7 & 8, Chrome 11에서 확인).

또는 배경 이미지 대신 목록 스타일 이미지 속성을 사용할 수 있습니다. 나는 다른 날 에이 문제를 해결했습니다. '이웃'에 부유 한 텍스트 포기 동작은 배경 이미지가 아닌 '컨텐츠'에만 적용됩니다 (예 :).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top