父浮動元素不會調整百分比寬度子

我有一個浮動父div包含一個孩子使用width: 30%。父浮動元素不會調整百分比寬度子

看來這個父div不會調整大小，如果使用百分比作爲寬度單位，但它使用px或ems時效果很好。

有沒有什麼辦法可以讓父div在使用width: 30%時調整它的寬度，因爲我想要一個流體佈局？

請看看這個例子瞭解更多詳情： http://jsfiddle.net/sBzYH/

<div class='percent container'> 
    <div> 
     <h3>width: 30%</h3> 
     <p> 
      When using the child div 
      with percent width, the floating 
      parent div keeps expading 100%. 
     </p> 
    </div> 
</div> 

<div class='pixel container'> 
    <div> 
     <h3>width: 100px</h3> 
     <p> 
      When using the child div 
      with pixel width, the floating 
      parent div resizes accordingly. 
     </p> 
    </div> 
</div>

來源

2011-10-21 zanona

我不確定你在這裏的意思 - 你沒有在父'div'上設置寬度？ – robertc

你是正確的在這種情況下，我不是因爲我想它根據其內容寬度來調整自己。因此'float：left'。 – zanona

但是它的內容將會是它的寬度的30％，每次你將容器變小時，內容也會變得更小？ – robertc

的父容器將已經是流體的寬度，因爲它是一個div它會默認爲全部可用的寬度，但你可以明確地限制。 This CSS會讓你的兩個例子大致相同的尺寸：

.container { 
    width: 66%; 
    min-width: 325px; 
}

如果有超過（只是下）500px的可用於容器，然後將擴大佔用的可用空間的66％，但是會繼續留寬足以使30％寬的子元素總是至少100px寬。

來源

2011-10-21 14:40:13 robertc

父浮動元素不會調整百分比寬度子

回答

相關問題