부모 div 너비를 최소 자식 너비로 제한하는 방법은 무엇입니까?

Javascript없이이 작업을 수행 할 수 있습니까?부모 div 너비를 최소 자식 너비로 제한하는 방법은 무엇입니까?

여기

<div id="parent"> 
<div id="child1"> ... </div> 
<div id="child2"> ... </div> 
</div>

내가 부모 DIV가 자식 DIV의 최소한의 폭을 갖고 싶어 .. 모의 마크 업입니다.

내 특별한 시나리오 div 중 하나의 내부에 가변 폭 이미지가 있습니다 div의 나머지 부분을 img div의 너비로 제한하고 싶습니다.

출처

2012-03-30 srinathhs

자바 스크립트가 없으면 이것이 가능하지 않을 수 있습니다. 당신이 그것을 사용하고 싶지 않은 이유가 있습니까? – Luke

이미지의 크기가 최소로 설정되지 않는다는 것을 안다면 ?? 그리고 만약 당신이 잘 동적 인 것을 원한다면 당신은 JavaScript에 아무런 문제가 없다. – Baz1nga

나는 유동적으로 디자인하려고 노력하고있다. 그리고 이미지는 브라우저의 너비에 따라 바뀔 고정 된 퍼센트 높이를 가지고 있다고 생각한다. 나는 자바 스크립트를 사용하면 부드러운 전환되지 않을 것입니다. – srinathhs

주석의 토론을 기반으로합니다. JS가 실행될 때까지 항상 기본 div를 표시 할 수 없습니다. 로 모양 마크 업 다음 없습니다 :

<div id="parent" style="diplay:none"> 
<div class="child" style="width:100px"> ... </div> 
<div class="child" style="width:50px"> ... </div> 
</div>

JS 코드 :

var childELements=document.getElementsByClassName("child"); 
var minWidth=999999; 
for(var i=0;i<childELements.length;i++) 
{ 
var width=childELements[i].getWidth(); 
    if(width<minWidth) 
    { 
     minWidth=width;      
    } 
} 

var parent=document.getElementById("parent"); 
parent.style.width=String(minWidth)+"px"; 
parent.style.display="block";

Live Demo

출처

2012-03-30 18:31:32 Baz1nga

참고, 위의 모든 기능이 모든 브라우저에서 지원되는지 확실하지 않습니다. dnt 저를 저주합니다. jquery soln을 제공하지 않았습니다. D : – Baz1nga

감사합니다. javascript 없이는 할 수없는 것처럼 보이므로, 귀하의 제안으로 구현할 것입니다. – srinathhs

Math.min(parseInt(document.getElementById("child1")), parseInt(document.getElementById("child2")));

이 수에 어떤 CSS 솔루션을.

출처

2012-03-30 18:37:36 mystrdat

부모 div 너비를 최소 자식 너비로 제한하는 방법은 무엇입니까?

답변

관련 문제