2013-02-27 5 views
31

부모 div를 자식 div만큼 넓게 만들려고합니다. 자동 너비는 부모 div가 전체 화면에 맞도록 만듭니다. 하위 div는 내용에 따라 다른 너비가되므로 그에 맞게 조정하려면 부모 div가 필요합니다. 당신의 도움을 주셔서 감사합니다!부모 div 자동 크기를 자식 div의 너비로 만드는 방법

<div style='width:auto;'> 
     <div style="width: 135px; float: left;"> 
      <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> 
      <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> 
       <dd style="white-space: nowrap;">1</dd> 
       <dd style="white-space: nowrap;">2</dd> 
      </dl> 

      <h4 style="padding-right: 5px; padding-left: 15px;">Column1</h4> 
      <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;">  
       <dd style="white-space: nowrap;">1</dd> 
       <dd style="white-space: nowrap;">2</dd> 
      </dl> 
     </div> 

     <div style="width: 135px; float: right;"> 
      <h4 style="padding-right: 5px; padding-left: 10px;">Column2</h4> 
      <dl style="padding-right: 5px; padding-left: 15px; margin-top: -8px; overflow-x: hidden;"> 
       <dd style="white-space: nowrap;">1</dd> 
       <dd style="white-space: nowrap;">2</dd> 
       <dd style="white-space: nowrap;">3</dd> 
      </dl> 
     </div> 
</div> 

답변

39

인테리어 <div> 요소는 가능성이 모두 float:left해야한다. 컨테이너 폭의 크기를 100 %로 자동으로 나눕니다. 컨테이너 div에 width:auto 대신 display:inline-block을 사용해보세요. 또는 float:left 컨테이너 일 수도 있고 overflow:auto을 적용 할 수도 있습니다. 당신이 정확히 무엇을했는지에 달려 있습니다.

+0

감사 Madbreaks : inline-block이 아마도 당신이려고하고있는 무슨 - 다른 표시 유형을 사용합니다. 두 가지 왼쪽 플로트를 만드는 것은 내가 시도하지 않은 것입니다. – bradley4

+0

그래. 내 도움을 받았다고 생각하면 내 대답을 너무 많이 읽거나 올바른 것으로 생각한다면 받아들이십시오. – Madbreaks

+0

동의하려면 5 분을 더 기다려야합니다.) – bradley4

7

부모 div (나는 가장 바깥 쪽 div로 가정)는 display: block이며 가능한 컨테이너 (이 경우에는 본문)의 사용 가능한 모든 영역을 채 웁니다.

http://jsfiddle.net/a78xy/

관련 문제