如何使一個父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>

來源

2013-02-27 bradley4

你的內部<div>元素應該有可能同時爲float:left。將尺寸自動分配爲容器寬度的100％。嘗試在容器div上使用display:inline-block而不是width:auto。或者可能是float:left該容器也適用於overflow:auto。取決於你究竟做了什麼。

來源

2013-02-27 01:15:28 Madbreaks

感謝Madbreaks。製作左側花車是我沒有嘗試的。 – bradley4 2013-02-27 01:19:15

當然可以。如果你覺得我幫了你的忙，請考慮提高我的答案，或者如果你覺得這是正確的，請接受它。 – Madbreaks 2013-02-27 01:21:03

我需要等5分鐘才能接受它=） – bradley4 2013-02-27 01:23:02

父div（我假設最外面的div）是display: block並且將填滿它的容器（在這個例子中是body）的所有可用區域。使用不同的顯示類型 - inline-block可能是你要什麼：

http://jsfiddle.net/a78xy/

來源

2013-02-27 01:16:55

如何使一個父div自動調整到其子div的寬度

回答

相關問題