2012-10-05 2 views
3

알 수없는 크기 (어린이)의 부동 div를 테두리 (부모)로 묶고 같은 줄에 자식을 유지하는 방법은 무엇입니까?자녀를 한 줄로 유지하면서 부모와 자녀를 어떻게 부양합니까?

부모 div가 width: 100%;으로 설정되어 있지 않으면 어린이는 다른 부모 아래에있는 어린이를 축소하는 경향이 있습니다.

enter image description here

UPDATE : 코드를 게시하는 동안, 나는 그것을 파악, 를 참조하십시오.

내 코드에는 어린이 주위에 여분 <div> 래퍼가있었습니다. 나는 그들을 제거하거나 display: inline;로 설정해야했습니다.

<div class="body"> 
    <div class="parent"> 
     <div> 
      <div class="child"></div> 
     </div> 
     <div> 
      <div class="child"></div> 
     </div> 
     <div> 
      <div class="child"></div> 
     </div> 
    </div> 
</div>​ 

다른 유용한 정보를 제공해 주셔서 감사합니다.

+0

코드를 게시하십시오. – j08691

답변

1

어린이 div를 display: inline 또는 display: inline-block으로 변경하지 않으면 세로로 겹쳐서 표시됩니다. 자녀가 float 일 경우 해당 크기는 부모의 경계를 넘지 않습니다. display: inline 또는 display: inline-block을 사용하는 경우, 부모가 모두 들어 맞을만큼 넓어서 부모를 늘릴 수있는 한 어린이는 인라인됩니다.

바이올린 : http://jsfiddle.net/MPCsD/1/

0

적어도 자녀 또는 부모의 너비를 고정으로 설정해야한다고 생각합니다. 어쩌면 자바 스크립트로 측정 할 수 있습니다.

관련 문제