javascript - 如何使 DIV 不是所有方向都可以调整大小

Question

我有一些使用 bootstrap 制作的布局。

 <div class = row style="width:400px; height:400px">
        <div class = "col-sm-12" style="height:50%; border:2px solid;"></div>
        <div class = "col-sm-6" style="height:50%; border:2px solid;"></div>
        <div class = "col-sm-6" style="height:50%; border:2px solid;" ></div>
 </div>

视觉上看起来:

也许有人可以建议任何框架或代码解决方案来调整 DIV 的大小，但仅限于某些方向，不允许调整外部边的大小。这是图片的解释:

也许有人可以建议代码或库如何制作它。我使用 angular，bootstrap。

Answer 1

从图片中我了解到您想从边框线拖动并调整 div 的大小。

css3 有一个 resize 属性，语法为:

resize: none|both|horizontal|vertical|initial|inherit;

使用以下 CSS:

div {
   resize: both;
   overflow: auto;
}

从垂直方向和水平方向你都可以很好地调整大小。

更多:

http://www.w3schools.com/cssref/css3_pr_resize.asp

注意:不过，IE 不支持此功能。