Div 컨테이너가 하위 내용 주위에 배치되지 않음

Question

맞춤 팝업 및 툴팁에 사용할 둥근 모서리 컨테이너를 만듭니다. Originaly, 코너 컨텐츠로 둥근 png와 함께 3x3 테이블을 사용했습니다.

이러한 반올림 된 PNG는 24x24 크기이며 내부 콘텐츠에 대해 즉시 24kx 마진을 적용하는 방법을 확인할 수 있습니다. 더 많은 여백/패딩 유연성을 위해 마크 업을 Divs로 변환하려고합니다.

나는 전문적인 모양을 위해 위에 24px 그라디언트가 정말 필요합니다. 나는 Div 컨테이너로 거의 끝났지 만, 나는 어려운 그루터기에 맞서있다! 콘텐트 div를 동적으로 확장하여 하위 콘텐트를 포함 할 수 없습니다! 지금까지 내 코드가 있습니다. 귀하의 편의를 위해 배경 이미지를 제거하고 간단한 배경색으로 대체했습니다.

<div id="container" style="position: absolute; width: 200px; height: 100px;"> 
     <div id="topLeft" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; top: 0px; left: 0px;"> 
     </div> 
     <div id="topRight" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; top: 0px; right: 0px;"> 
     </div> 
     <div id="bottomLeft" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; bottom: 0px; left: 0px;"> 
     </div> 
     <div id="bottomRight" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; right: 0px; bottom: 0px"> 
     </div> 
     <div id="topFill" style="background-color: Lime; position: absolute; top: 0px; left: 24px; 
      right: 24px; height: 24px;"> 
     </div> 
     <div id="leftFill" style="background-color: Yellow; position: absolute; width: 24px; 
      left: 0px; bottom: 24px; top: 24px;"> 
     </div> 
     <div id="bottomFill" style="background-color: Lime; position: absolute; height: 24px; 
      bottom: 0px; left: 24px; right: 24px;"> 
     </div> 
     <div id="rightFill" style="background-color: Yellow; position: absolute; width: 24px; 
      top: 24px; right: 0px; bottom: 24px;"> 
     </div> 
     <div id="middleFill" style="background-color: Fuchsia; position: absolute; left: 24px; 
      right: 24px; top: 24px; bottom: 24px;"> 
     </div> 
     <div id="contentContainer" style="top: 0px; left: 0px; white-space: nowrap; position: absolute;"> 
      ALongStringOFTEXTThatDoesNotBreakToForceTestIfTheDivWillProperlyExpand 
     </div> 
    </div> 

엉망으로 나를 끌어낼 수있는 사람 덕분에! 그런데이 게시물은 여러 시간 동안의 연구와 정신 상실로 이어져 왔습니다. ;-)

Answer 1

컨테이너 높이를 100px로 고정했습니다. 다른 사업부가 나타나지 않는 것은 당연합니다. 높이를 제거하십시오 : 100px 부분, 정말로 필요한 경우 오버플로 추가 : 숨김 및 컨테이너가 스스로 높이를 가져옵니다.

Answer 2

모든 당신 된 DIV 객체 흐름의 더 이상 일부가이 질문을

how to wrap float div around absolute position divs?

를 참조하십시오. 그래서 컨테이너가 그들을 감싸지 않습니다. 나는 똑같은 문제에 직면하고있다. 나는 컨테이너의 높이를 수동으로 설정하기 위해 JS에 의존해야한다고 생각한다.

Answer 3

우선 캐스케이드 스타일 시트 (CSS)를 사용하는 법을 배워야합니다. 이로 인해 문제가 100 만 개 줄어들고 더 많은 일을 할 수 있습니다. css을 사용하기로 결정한 경우 부모님의 모서리를 빙빙 돌릴 수도 있습니다 div 이미지가 없습니다! 우! 나는 그것이 생각하는 것이 미친 것을 안다. 그러나 그것은 사실이다.

나는 당신이 할 해졌다 정확히 말할 수 있지만,이 같은 시도 할 수 있습니다 : (HTML) 스타일 지금

<div class="wrapper"> 
    <div class="topR"> 

    </div> 
    <div class="topL"> 

    </div> 
    <div class="content"> 

    </div> 
    <div class="bottomR"> 

    </div> 
    <div class="bottomL"> 

    </div> 
</div> 

: (CSS)

.wrapper { 
margin: 0 auto; /* Centers the div */ 
border-radius: 4px 4px 0 0; /* this will round the top two corners of the main container */ 
background: #ffffff; 
width: 200px; 
} 

.topR{ 
float: right; 
background: #ffffff; 
width: 24px; 
} 

을

등등. div class="wrapper"> 또는 메인 컨테이너를 가지고 고정 높이를 유지해야하는 경우에는 괜찮을 것입니다.

항상 overflow: auto;을 수행하면 컨테이너에서 나오는 내용을 숨기고 해당 div 안에 내용을 스크롤 할 수 있습니다.

행운을 빈다. 나는 너를 도왔 으면 좋겠다.