자식 div 컬렉션이 동적으로 가져올 때 div를 가져 오려고 시도합니다.

Question

동적 div 컨테이너 (동적으로 팝업 컨테이너 내부에 있음)로 가져 오는 div 컬렉션이 있습니다. 때로는 1이 있고 때로는 6이 있습니다. 3 개 이상의 하위 div에 대해 부모님이 HORIZONTALLY 스크롤 막대를 갖기를 바랍니다. 문제는 계속하는 대신 자식 div가 줄 바꾸기입니다.

다음 실제로 작동 :

<div class="container"> 
    <div class="parent-container"> 
    <div class="parent"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
    </div> 
    </div> 
</div> 

.container { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 2px solid #0486A0; 
    border-radius: 10px 0 0 10px; 
    display: none; 
    height: 450px; 
    min-width: 300px; 
    position: absolute; 
    right: 315px; 
    top: 407px; 
    z-index: 2000000;} 

.parent-container{  
    float: left; 
    max-width: 670px; 
    overflow: auto;} 

.parent { 
    display: block; 
    width: -moz-max-content;} 

.child {  
    width: 200px; 
    float: left; 
    } 

하지만

을 주목 -moz-MAX-내용! 이 기능은 Firefox에서만 작동하기 때문에 사용할 수 없습니다. 최대 너비가 작동하지 않습니다.

TL : DR : moz-max-content에 대한 해결책이 있습니까? 그렇다면 부모 div에 고정 폭을 지정할 필요가 없습니까?

Answer 1

overflow-y: scroll css 규칙에 관심이있을 수 있습니다.

자세한 정보 here.

Answer 2

문제를 안

는 최대 폭을 가져야한다 컨테이너 말 800 픽셀

을 (세트 오버플로 : 자동;) 내가 아이를 포함하는 다른 사업부 "childContainer를"가진 게 좋을 것 는

를 div의 아이가 ($의 .ajax.success에) 성공적으로로드 된 경우, 사용 JQuery와는 (같은)

$("#childContainer").width($("#childContainer").width() + $(child).width()); 

#childContainer의 폭을 업데이트 할 수 있지만, 당신은 당신이로드 한 div의 수를 추적해야합니다. 하지만 컨테이너 내 div를 동적으로 크기 조절할 수 있습니다.