调整HTML容器元素的大小不会正确调整子元素的大小

Question

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

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

看起来像这样：

1：

我想要的是它是这样的：

2：

内容不得低于边界线。什么CSS规则必须应用于子元素，以便根据其容器元素更改其大小？我已经尝试了所有可用的定位，但它不起作用 - 元素表现得非常明确。

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

谢谢。

Answer 1

您是否尝试在%设置所有高度和宽度？我在一个3x3网格的JSFiddle中汇总了一个例子。它们都设置为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();

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