Cách đặt kích thước tự động div gốc cho chiều rộng của div con của nó

Question

Tôi đang cố gắng chỉ tạo div cha mẹ rộng bằng div con. Chiều rộng tự động làm cho div gốc phù hợp với toàn bộ màn hình. Các divs trẻ em sẽ có độ rộng khác nhau tùy thuộc vào nội dung của chúng vì vậy tôi cần div cha mẹ để điều chỉnh cho phù hợp. Cảm ơn bạn đã giú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> 

Answer 1

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

Answer 2

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

http://jsfiddle.net/a78xy/