플로팅 div가 동적 콘텐츠에 맞게 확장되지 않습니다

Question

이 주제에 대한 게시물이 여러 개 있지만 모든 솔루션이 저에게 효과적이었던 것 같습니다. 아마도 누군가 내가 놓친 것을 알아낼 수 있습니다.

나는 열과 같이 서로 옆에 3 개의 상자가 떠있었습니다. 특정 배경 이미지 등으로 인해 각 상자는 두 개의 div로 구성됩니다. 바깥 쪽 div는 "calloutbox"클래스를 가지며 왼쪽으로 떠있었습니다. "calloutbox"의 내부에는 "callout-content"라는 동적 인 내용을 담고있는 또 다른 div가 있습니다 (저는 wordpress를 사용하고 있습니다).

지금까지 동적으로 생성 된 콘텐츠에 맞게 상자를 확장 할 수 없었습니다. 높이를 100 %로 설정하면 붕괴됩니다. 나는 오버플로의 12 가지 조합을 시도했다 : 숨겨진, 명확 : 행운과 함께 등. 사전에 http://jsfiddle.net/daniec/r8ezY/

감사 :

.calloutbox { 
    min-height:310px; 
    width:30%; 
    float:left; 
    margin:0 0 0 25px; 
    position:relative; 
    background-image:url(images/shadow.png); 
    background-repeat:no-repeat; 
    background-position:right bottom; 
    display:block; 

} 

.calloutbox:after { 
    clear:both; 
} 

.callout-content:after { 
    clear:both; 
} 

.calloutbox:nth-child(1) { 
    min-height:200px; 
} 

/*The content inside the three boxes on the homepage */ 
.callout-content { 
    height:100%; 
    width:90%; 
    right:8px; 
    border:1px solid #e6e4e4; 
    bottom: 8px; 
    background-color:white; 
    position:absolute; 
    background-image:url(images/yellow-title-bar.png); 
    background-repeat:repeat-x; 
    background-position:top; 
    padding: 0 10px 10px 10px; 
} 
​ 

그 사람이 도움이된다면 여기에 jsfiddle의 코드입니다 :

여기

<div id="callout-container"> 
    <div class="calloutbox"> 
    <div class="callout-content">Dynamic content goes here</div> 
    </div> 
    <div class="calloutbox"> 
    <div class="callout-content"></div> 
    </div> 
    <div class="calloutbox"> 
    <div class="callout-content"></div> 
    </div> 
</div>​ 

는 CSS입니다!

Answer 1

그들은 부 풀리지 않으며, 은 절대적으로입니다.

절대 배치 된 요소는 더 이상 레이아웃의 일부가 아닙니다. 그들은 더 이상 레이아웃을 염려하지 않는 부모를가집니다. 따라서 백분율이 아닌 픽셀 단위로 크기를 지정해야합니다. 백분율은 더 이상 갖지 않는 래퍼를 기준으로합니다.

Answer 2

수레 작업은 고통 스러울 수 있습니다.

display: inline-block; 

그것은 인라인 요소처럼 동작하지만,이 블록 수준 요소 같은 스타일 수 : 다른 방법으로, 인라인 블록을 사용하여 시도해야합니다. 그것은 비록 IE6에서 작동하지 않습니다.

Answer 3

.calloutbox { 
    white-space:nowrap; 
} 

트릭을해야합니다. 그렇지 않으면 jsfiddle을 만들어 코드를 실행할 수 있습니다.