[html] 부모 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/


답변