Question

我有一个固定宽度和高度的HTML div，包含用'float：left'排列的嵌套div。我想缩放嵌套的div，以便它们填充容器（像往常一样在最后的嵌套元素之后留下空格。换句话说，我希望嵌套元素尽可能大而不会溢出容器。< / p>

样本起点：

<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的目标大小;我怀疑我需要用容器和内容元素的相对宽高比做一些聪明的事情，但我想不出任何有用的东西......

Answer 1

您只能使用CSS，但仅限于符合标准的浏览器（因此，不是IE7或更低版本）。

将包含div设置为display: table-row;

将每个嵌套的div设置为display: table-cell;

希望有所帮助：）

Answer 2

您可以计算浮动div的数量，将容器宽度除以它们，然后计算宽度的百分比。

规模浮动内容以填充容器

2 个答案: