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