div可调整大小,如文本区域

Question

浏览器允许通过默认拖动角来重新调整文本区域的大小.我想知道这个规则是否可以应用于其他元素(例如div).我知道使用jQuery draggable或jQuery-ui resizable函数可以实现这种效果,但如果可以避免依赖该库,我想用普通的html/css来实现.他们可以应用于div的任何CSS规则是否能够以这种方式运行？

如果您有任何其他解决方案,我希望听到它.

Answer 1

使用css3 resize属性.

div {
    resize: both;
}

还有一个resize: horizontal和resize: vertical.

目前尚未跨浏览器http://caniuse.com/#feat=css-resize

Answer 2

您可以使用CSS3执行此操作.您可以div通过设置调整大小和溢出样式来创建用户可调整大小的标记.我在这里设置了水平和垂直的调整大小:

.isResizable {
  background: rgba(255, 0, 0, 0.2);
  font-size: 2em;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
  width: 160px;
  height: 120px;
  min-width: 120px;
  min-height: 90px;
  max-width: 400px;
  max-height: 300px;
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>