具有自動調節寬度

浮動的DIV

<div class="clearfix"> 
    <div style="width:33%;float:left">content</div> 
    <div style="width:33%;float:left">content</div> 
    <div style="width:33%;float:left">content</div> 
</div>

當有對一個線3個的div，因爲我指定每一個百分比寬度，都完全佔據的寬度的父寬度。我試圖實現的是讓浮動div自動調整它們的寬度（即不用硬編碼百分比寬度），具體取決於行上存在多少個div。例如，如果有2個div，則每個div將佔據整個寬度的一半（即50％）。如果有3格，那麼33％。

這可能與浮動的div？如果沒有，我可以採用其他什麼方式來實現這種流體佈局？我研究了讓父代使用'table'顯示，內部div使用'table-cell'顯示，但是父代停止佔用100％的可用寬度。

來源

2012-10-05 steacha

你的表格方式對我來說工作得很好，只記得從兒童divs中刪除float:left，看到我的工作demo。

來源

2012-10-05 12:28:08 Nelson

嗯，我有沒有覺得愚蠢。我想我可能已經在那裏留下了浮點定義。謝謝尼爾森！ – steacha

不要打擾，我們都做眺望不時，但在這裏，你會發現很多的眼睛發現它們！ – Nelson

當你有一個'height'和'overflow-y：scroll;'指定好時，你怎樣才能很好地玩這個遊戲？ – Jammer

你可以嘗試使用CSS像

display:box;

脫穎而出父DIV。和

box-flex:1

爲嵌套。樣品見 this link。

來源

2012-10-05 12:27:20 lavrik

您可以使用jQuery實現風格的動態變化：

var divcnt = $(".clearfix div").length; 
var widthInPercent = 100.0/divcnt; 
$(".clearfix div").each(function() { 
    $(this).css("width", widthInPercent+"%") 
});

有關示例見this demo。

來源

2012-10-05 12:44:17 halex

具有自動調節寬度

回答

相關問題