플로팅 요소를 둘러싸는 비 플로팅 요소 만들기

Question

플로팅 항목과 그 주위를 감싸고 있지 않은 컨테이너의 동작과 관련하여 현재 문제가 있습니다.

플로팅 요소를 래핑하는 항목 목록이 있습니다.

ul.items li 
{ 
    display: block; 
    border: 1px solid pink; 
} 

ul.items li img 
{ 
    float: left; 
} 

은 이전에 내가 각 목록 항목의 하단에 '청소'항목을 추가 한 주변의 포장을 확장하기 :

이

<ul class="items"> 
    <li><img src="" />Text here</li> 
    <li><img src="" />More text</li> 
</ul> 

CSS의이 같은 : 이것은 매우 단순화 된 버전입니다 이미지. 이것은 Tony Aslett's CSS version과 같습니다. 보기는 here를 볼 수있다.

불행히도 목록 왼쪽에 메뉴가 떠있어 삭제를 추가하면 첫 번째 항목 아래에 큰 공간이 생깁니다. 이것은 위의 페이지에서 아래에 언급되어 있습니다. 경고의 말씀 (중요). 효과는 here으로 볼 수 있습니다.

오버 플로우 속성을 사용하여 Paul O'Brien에서 찾은 대체 솔루션을 따랐습니다. 이것은 매력처럼 작동합니다. 불행히도, 왼쪽의 메뉴 외에도 각 목록 항목에는 오른쪽 상단에 메뉴가 떠있었습니다. overflow: auto을 사용하면 해당 항목이 외부로 푸시됩니다. 이것은 here으로 볼 수 있습니다. 마크 업이 유사합니다

<ul class="items"> 
    <li> 
     <div class="floaty">*</div> 
     <div class="item"> 
      <div class="img"></div>Text here 
     </div> 
    </li> 
    <li> 
     <div class="floaty">*</div> 
     <div class="item"> 
      <div class="img"></div>More text 
     </div> 
    </li> 
</ul> 

이 방법을 사용하여 '항목을'요소 내에 머물 수있는 '뜨는'요소를 얻을 수있는 방법이 있나요? 또는 누락 된 다른 해결책이 있습니까?

Answer 1

여기에 전체 사용 사례가 무엇인지 확실하지 않지만 .floaty 요소의 경우 float 대신 position을 사용하는 것이 합리적입니까?

기본적으로이 추가

ul.items li { position: relative; } 
div.floaty { float: none; position: absolute; top: 0; right: 0; } 

Fiddle