縮放浮動內容以填充容器

我有一個固定寬度和高度的HTML div，其中包含用'float：left'排列的嵌套div。我想縮放嵌套的div，以便填充容器（留下最後一個嵌套元素的空間，換句話說，我希望嵌套元素儘可能大而不會溢出容器。）縮放浮動內容以填充容器

樣品的起點：

<div style="position: relative; background-color: blue; border: 1px solid yellow; width: 650px; height: 500px; margin: auto;"> 
    <div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"></div> 
    <div style="position: relative; background-color: red; border: 1px solid magenta; width: 200px; height: 150px; margin: 5px; float: left;"></div> 
    ... 
</div>

（樣式內聯爲了簡潔）

內容的div必須用它們的縱橫比被調整大小不變;既不的div的數量也不是容器的尺寸是已知的前進

由於CSS沒有提供以這種方式自動調整浮動內容的方法，因此我在JavaScript中執行此操作，但無法找到合適的算法來計算內容div的目標大小;我懷疑我需要在容器和內容元素的相對高寬比方面做一些聰明的事情，但我想不出任何可行的方法......

來源

2011-01-12 Laurie

你能提供一些更詳細的例子嗎？我認爲最簡單的方法就是繪製一些前後顯示的圖像，用於顯示不同數量的元素。 – thirtydot 2011-01-12 10:08:47

是jQuery可以接受嗎？或者你需要純粹的JavaScript？ – Dan 2011-01-12 10:23:48

我已經在使用jQuery，所以使用這個解決方案很好:)我會嘗試創建一些示例圖像，如果它可以幫助解釋問題。 – Laurie 2011-01-13 22:12:33

您可以僅使用CSS來完成此操作，但只能在標準兼容的瀏覽器（所以，不是IE7或更低）。

設置你的含股利display: table-row;

設置每個嵌套的div來display: table-cell;

希望幫助一點點:)

來源

2011-01-12 09:35:56 Kalessin

你可以指望浮動的div的數量，除以容器寬度由他們，然後計算寬度的百分比。

來源

2011-01-13 09:59:39 Elq

縮放浮動內容以填充容器

回答

相關問題