절대 위치 요소가있는 Clearfix

Question

다음과 같은 문제가 생깁니다.
테두리가 포함 된 항목을 줄 바꿈하지 않습니다. 내용 항목을 절대 위치에 배치했기 때문에이 사실을 알았지 만 레이아웃이 작동하려면 절대적이어야합니다. 이것은 또한 clearfix 솔루션을 사용할 수 없다는 것을 의미합니다 (이는 옵션이 아닌 요소를 플로팅해야 함을 의미합니다).
내 질문은 어떻게 포함 된 요소의 높이를 얻으려면 부모 div 얻는 것입니다.

편집 : 없음 자바 스크립트 솔루션, CSS 만

HTML :

<div class="mask"> 
    <div id="content-1" class="content-item"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit... 
    </div> 
    <div id="content-2" class="content-item"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit... 
    </div> 
</div>​​​​ 

CSS :

.mask{ 
    position:relative; 
    width:800px; 
    border: 1px solid black; 

} 
.content-item{ 
    position: absolute; 
    width:300px; 
} 
#content-1{ 
    left:10px; 
} 
#content-2{ 
    left: 300px; 
} 

Answer 1

는 float:left 한 항목을 설정하고 position:absolute; right:0에 다른과 clearfix를 사용합니다.

Answer 2

변경-.content-item의 position: absolute;을 입력하고 float: left;으로 지정하십시오. #content-1 및 #content-2을 삭제하면 더 이상 필요하지 않습니다. 마지막으로 html에 새로운 클래스를 삽입하고 스타일 세트에 해당 클래스에 clear: both;을 추가하십시오.

예 : http://jsfiddle.net/skeurentjes/xLTJp/1/