떠 다니는 img 주위에 ul을 어떻게 흐르게합니까?

img가 왼쪽으로 떠 다니고 img 오른쪽으로 렌더링해야하는 긴 ul이 있고 그 아래에서 계속합니다. 그것은 이것을하지만 img 옆에있는 ul의 부분은 모두 왼쪽으로 정렬되고 들여 쓰기가 사라집니다.떠 다니는 img 주위에 ul을 어떻게 흐르게합니까?

최소 사례입니다. (jsbin에 있음)

<html> 
<head> 
</head> 
<body> 
    <div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div> 
    <ul> 
     <li>Level 1</li> 
     <li>Level 1</li> 
     <li> 
      <ul> 
       <li>Level 2</li> 
       <li>Level 2</li> 
       <li>Level 2</li> 
       <li>Level 2</li> 
      </ul> 
     </li> 

     <li>Level 1</li> 
     <li>Level 1</li> 
     <li>Level 1</li> 
     <li>Level 1</li> 
    </ul> 
    <div style="clear:both"><!-- --></div> 
    More content More content More content More content More content More content More content More content More content More content More content 
</body> 
</html>

감사합니다.

출처

2012-02-06 bnieland

은 무엇 URL? ul이 이미지 주위를 흐르도록하고 적절한 들여 쓰기로 렌더링합니다. – bnieland

들여 쓰기가 실제로 있지만 몸체에서 계산됩니다. float 이미지 div는 중첩 된 ul의 여백/패딩을 덮습니다. 나는이 문제에 대한 해결책을 오랫동안 찾고 있었지만 찾을 수는 없었다. 떠 다니는 요소 뒤에있는 것은 배경 이미지, 패딩 또는 여백 일 수 있습니다. 여기에 테스트 케이스가있다. 나는 그것을 SO에 게시했지만 JS http://www.easwee.net/floated_img_article/을 제외하고는 1 년이 넘는 해답을 제시하지 못했다. – easwee

이것은 질문이었습니다 : http://stackoverflow.com/questions/2456137/floated-image-with-variable-width-and-heading-with-background-image – easwee

이 시도 :

/* add some margin-right for some white space between the list and image */ 
div {margin-right:12px; float:left;} 

/* add overflow and set the list-style attributes */ 
li {overflow:hidden; list-style:inside square none;}

출처

2012-02-06 15:53:00 jim31415

당신은 파티를 흔드는 파티를 락킹합니다! – bnieland

http://jsbin.com/ulivem/2/edit 참조 – bnieland

CSS :

div {margin:0 10px 5px 0; float:left;} 


ul{ 
padding:0px; 
list-style-type:none; 
margin:0px; 
}

출처

2012-02-06 15:55:29 AlexC

떠 다니는 img 주위에 ul을 어떻게 흐르게합니까?

답변

관련 문제