상대 위치 지정된 블록 요소를 포함 된 절대 위치 요소와 동일한 크기로 만듭니다.

Question

그래, 여러 div 및 모든 내용을 취해서 서로 위에 겹쳐서 포함하는 div (#) 스택 다음과 같은 방법을 통해 사물의 정상적인 흐름에 나타납니다

CSS :

#stack 
{ 
    position:relative; 
    display:block; 
} 
#stack div 
{ 
    position:absolute; 
    left:0; 
} 

HTML :

지금 DIV # 스택을 제외하고, 작동

<div id="stack"> 
    <div> 
     <img src="images/1.jpg"> 
     <p> 
      First Image 
     </p> 
    </div> 
    <div> 
     <img src="images/2.jpg"> 
     <p> 
      Second Image 
     </p> 
    </div> 
    <div> 
     <img src="images/3.jpg"> 
     <p> 
      Third Image 
     </p> 
    </div> 
    <div> 
     <img src="images/4.jpg"> 
     <p> 
      Fourth Image 
     </p> 
    </div> 
</div> 

은 폭/높이가 0 나는 너다. 그것의 가장 큰 아이와 같은 크기가 좋아.

미리 도움을 청하십시오!

Answer 1

문서의 흐름에서 내부 div를 position: absolute;으로 가져 가면 외부 div는 어떤 경우에도 가장 큰 자식의 크기로 확장 할 수 없습니다. 그 효과를 얻으려면 자바 스크립트를 사용해야합니다. 부모, 어떤 콘텐츠를 흘러 있지 않는이이 0x0의 크기를 가져옵니다 왜 절대 흐름에서 노드를 취한다 :

var w = false, h = false; 

$('#stack div').each(function() { 
    w = $(this).width() > w || !w ? $(this).width() : w; 
    h = $(this).height() > h || !h ? $(this).height() : h; 
}); 

$('#stack').css({ 
    width: w, 
    height: h 
}); 

Answer 2

설정 위치 : 당신이 jQuery를 잘 알고 있다면, 당신은 이런 식으로 뭔가를 사용할 수 있습니다 .

서버 코드 (예 : PHP)가 이러한 이미지를 알고있는 경우 이미지의 최대 너비와 최대 높이를 계산하고 부모의 높이/너비를 적절하게 설정할 수 있습니다.

Tatu가 말했듯이 JavaScript를 사용하여 클라이언트 측에서 사용할 수 있습니다.

Answer 3

#stack의 너비를 자녀에게 줄이거 나 높이를 염려합니까? 난 당신이 명시 적으로 display: block 넣어 이후 후자를 추측하고있어.

는 경우, 그냥 CSS와 함께 할 수 있기 때문에 :

#stack { 
    overflow: hidden; 
    _zoom: 1; 
}  
#stack div { 
    float: left; 
    margin-right: -100%; 
} 

나는 IE6에서 hasLayout을 트리거 할 _zoom: 1을 추가했다. 원하는 방식 (예 : 별도의 IE6 스타일 시트)으로 변경할 수 있으며, IE6을 지원할 필요가없는 경우에는 그대로 둘 수 있습니다.

오페라에서, 당신은이 #stack 완전히 아이를 수축 포장 할 수 있습니다 (즉, 폭뿐만 아니라) 당신은 스택을 떠 (또는 display: inline-block)와 자식 된 div에 width: 100%를 추가 할 때. Opera의 버그, 다른 브라우저의 버그 또는 애매한 사양으로 인한 차이 때문인지는 알 수 없습니다.