부모 div 자동 크기를 자식 div의 너비로 만드는 방법

부모 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>

---

인테리어 <div>요소는 둘 다 float:left. 컨테이너 너비의 크기를 자동으로 100 %로 나눕니다. 컨테이너 div display:inline-block대신 사용하십시오 width:auto. 또는 아마도 float:left용기와 함께 적용됩니다 overflow:auto. 정확히 무엇을 추구하는지에 따라 다릅니다.

---

상위 div (가장 바깥 쪽 div라고 가정)는 display: block컨테이너 (이 경우 본문)의 사용 가능한 모든 영역을 채울 수 있습니다. 다른 디스플레이 유형을 사용하십시오 inline-block.

http://jsfiddle.net/a78xy/

참고 URL : https://stackoverflow.com/questions/15102480/how-to-make-a-parent-div-auto-size-to-the-width-of-its-children-divs