javascript - 调整 HTML 容器元素的大小未正确调整子元素的大小

Question

我有一个简单的 AngularJS、JS、JQ、HTML5、CSS3 网络应用程序。我面临以下问题:当我尝试调整 Web 界面部分的大小时 - 子元素变小，但它们越过了边界线。所有内容都被抓取到 <div id="resizable"> 中这就是 jquery-ui可调整大小的元素:

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

看起来像这样:

1:

我想要的是它会像这样:

2:

任何内容都不应低于边框线。必须为子元素应用哪些 CSS 规则，以便它们根据容器元素更改大小？我已经尝试了所有可用的定位，但它就是行不通 - 元素的行为完全相同。

任何人都可以提供一个能够正确调整子元素大小的工作插件吗？每一个有用的答案都会受到高度赞赏和评价。

谢谢。

Answer 1

您是否尝试过在 % 中设置所有的高度和宽度？我在 JSFiddle 中拼凑了一个 3x3 网格的示例。它们都设置为 1/3 的宽度和高度，因此当用户调整外包装大小时会自动调整大小。

Example Fiddle

HTML

<div class="resizable">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...Two more rows...
</div>

CSS

.row {
    height:33%;
    width:100%;
}
.cell {
    width:33%;
    height:100%;
    float:left;
}

JS

$('.resizable').resizable();

显然，这是一个演示概念的示例，而不是可直接用于您网站的代码。如果您可以发布您的一些代码，我可以尝试对其进行调整。