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

html css

— 브래들리 4
소스

답변:

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

— Madbreaks
소스

감사합니다 Madbreaks. 왼쪽 수레를 모두 만드는 것은 내가 시도하지 않은 것입니다.

— bradley4 2013

오버플로 자동이 나를 위해 해냈어

— rustypaper

"display : inline-block"은 좋은 방법이지만 자식 요소의 너비에 백분율 값을 사용하려는 경우 예상대로 작동하지 않습니다. 백분율 값으로도 작동하도록 아이디어가 있습니까?

— Mohsen Haeri

@MohsenHaeri 당신은 할 수 없습니다. 자식 너비 비율은 부모 너비에서 계산됩니다. 생각해보세요 width: 50%. 부모의 폭이 얼마나 넓은 두 자녀가 있다면 ?

— Madbreaks

@Madbreaks 나는 그것을 알고 있습니다. 그것이 내가 그것을 할 해킹을 찾고있는 이유입니다. JS 방법을 사용할 수 있지만 순수한 CSS 방법을 알아낼 수 없었습니다. 어쨌든 주목 해주셔서 감사합니다.

— Mohsen Haeri

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

http://jsfiddle.net/a78xy/

— 폭발 환약
소스