Cách đặt kích thước tự động của div cha bằng chiều rộng của div con

Tôi đang cố gắng làm cho div mẹ chỉ rộng bằng div con. Độ rộng tự động làm cho div chính vừa với toàn bộ màn hình. Các div con sẽ có độ rộng khác nhau tùy thuộc vào nội dung của chúng nên tôi cần div mẹ điều chỉnh cho phù hợp.

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

Các <div>yếu tố nội thất của bạn có thể phải là cả hai float:left. Tự động chia kích thước thành 100% kích thước chiều rộng vùng chứa của chúng. Hãy thử sử dụng display:inline-blockthay vì width:autotrên div vùng chứa. Hoặc có thể float:leftlà thùng chứa và cũng có thể áp dụng overflow:auto. Phụ thuộc vào những gì bạn đang theo đuổi chính xác.

Div cha (tôi giả sử là div ngoài cùng) đang display: blockvà sẽ lấp đầy tất cả các khu vực có sẵn của vùng chứa của nó (trong trường hợp này là phần thân) mà nó có thể. Sử dụng một kiểu hiển thị khác - inline-blockcó thể là những gì bạn đang làm:

http://jsfiddle.net/a78xy/